.signinpanel {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    transform: translateX(100%);
    transition: .3s ease-out;
    z-index: 100;
}

    .signinpanel .panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-gray-50);
        color: #eee;
        overflow: auto;
    }

        .signinpanel .panel.officepanel {
            background-color: var(--background);
        }

        .signinpanel .panel .signupheader {
            background: var(--background);
            border-bottom: solid 1px var(--border);
            padding: calc(var(--spacing) * 6);
        }

            .signinpanel .panel .signupheader h1 {
                color: var(--primary);
                margin: 0;
                padding: calc(var(--spacing) * 1.5);
                font-size: 16px;
                font-weight: normal;
            }

            .signinpanel .panel .signupheader button {
                border-radius: calc(var(--radius) - 2px);
                width: calc(var(--spacing) * 9);
                height: calc(var(--spacing) * 9);
                transition: .3s ease-out;
                padding: 0;
                margin: 0;
                cursor: pointer;
            }

                .signinpanel .panel .signupheader button.logout {
                    width: unset;
                    height: calc(var(--spacing) * 8);
                    padding: calc(var(--spacing) * 2.5);
                    color: var(--foreground);
                    background: var(--background);
                    font-size: var(--text-sm);
                    line-height: var(--text-sm-line-height);
                    border: solid 1px var(--border);
                    vertical-align: central;
                }

                .signinpanel .panel .signupheader button:hover {
                    background-color: var(--accent);
                    color: var(--accent-foreground);
                }

            .signinpanel .panel .signupheader svg {
                width: calc(var(--spacing) * 4);
                height: calc(var(--spacing) * 4);
                font-size: var(--text-sm);
                line-height: var(--text-sm-line-height);
            }

                .signinpanel .panel .signupheader svg.logout {
                    color: var(--foreground);
                    font-size: var(--text-sm);
                    line-height: var(--text-sm-line-height);
                    margin-right: calc(var(--spacing) * 2);
                }

            .signinpanel .panel .signupheader p {
                color: var(--muted-foreground);
                font-size: var(--text-base);
                line-height: 1.5;
                margin: 0;
                padding: 0;
            }

        .signinpanel .panel .signupmain {
            margin-top: calc(var(--spacing) * 8);
        }

            .signinpanel .panel .signupmain .officemain {
                margin-bottom: calc(var(--spacing) * 6);
            }

                .signinpanel .panel .signupmain .officemain h2 {
                    font-size: 16px;
                    margin: 0;
                    padding: 0;
                    line-height: normal;
                    font-weight: normal;
                    color: var(--foreground);
                }

                .signinpanel .panel .signupmain .officemain p {
                    color: var(--muted-foreground);
                    font-size: var(--text-sm);
                    line-height: var(--tw-leading, var(--text-sm--line-height));
                    margin: 0;
                    padding: 0;
                    margin-top: calc(var(--spacing) * 2);
                }

                    .signinpanel .panel .signupmain .officemain p.info {
                        margin-top: 0;
                    }

                    .signinpanel .panel .signupmain .officemain p.showtotal {
                        margin-top: 0;
                        font-weight: bold;
                        font-size: var(--text-2xl);
                        line-height: normal;
                    }

.signupbox {
    background: var(--card);
    color: var(--card-foreground);
    padding: calc(var(--spacing) * 6);
    border: solid 1px var(--border);
    border-radius: calc(var(--radius) + 4px);
}

    .signupbox .banner {
        background-color: var(--muted);
        color: var(--muted-foreground);
        border-radius: calc(var(--radius) + 4px);
        height: calc(var(--spacing) * 9);
        margin-bottom: calc(var(--spacing) * 6);
        padding: 3px;
    }

        .signupbox .banner button {
            color: var(--foreground);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            padding: calc(var(--spacing) * 1);
            border-radius: calc(var(--radius) + 4px);
            height: calc(100% - 1px);
            text-align: center;
            width: 100%;
        }

            .signupbox .banner button.selected {
                background: #ffffff;
            }


    .signupbox .signupdetails {
    }

        .signupbox .signupdetails h3 {
            font-size: 16px;
            font-weight: normal;
            color: var(--card-foreground);
        }

        .signupbox .signupdetails p {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            color: var(--muted-foreground);
        }

        .signupbox .signupdetails label {
            font-size: var(--text-sm);
            line-height: 1;
            color: var(--card-foreground);
            margin-bottom: calc(var(--spacing) * 2);
            font-weight: 500;
        }

        .signupbox .signupdetails .inputarea {
            position: relative;
        }

            .signupbox .signupdetails .inputarea svg {
                color: var(--muted-foreground);
                position: absolute;
                width: calc(var(--spacing) * 4);
                height: calc(var(--spacing) * 4);
                left: calc(var(--spacing) * 3);
                top: calc(var(--spacing) * 3);
            }

            .signupbox .signupdetails .inputarea .inputbox {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                padding-left: calc(var(--spacing) * 1);
                padding-left: calc(var(--spacing) * 10);
                background-color: var(--input-background);
                border: solid 1px var(--input);
                border-radius: calc(var(--radius) - 2px);
                min-width: calc(var(--spacing) * 0);
                width: 100%;
                height: calc(var(--spacing) * 9);
            }

                .signupbox .signupdetails .inputarea .inputbox.noicon {
                    padding-left: calc(var(--spacing) * 2);
                }

        .signupbox .signupdetails .signupbutton {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            padding: calc(var(--spacing) * 2);
            border-radius: calc(var(--radius) - 2px);
            height: calc(var(--spacing) * 9);
            margin: 0;
        }

        .signupbox .signupdetails .footertext {
            color: var(--muted-foreground);
            font-size: var(--text-xs);
            line-height: var(--text-xs--line-height);
            text-align: center;
            margin: 0;
            margin-top: calc(var(--spacing) * 4);
        }

        .signupbox .signupdetails .signuperror {
            color: var(--destructive);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            padding: calc(var(--spacing) * 3);
            border: solid 1px var(--border);
            margin-bottom: calc(var(--spacing) * 4);
        }

            .signupbox .signupdetails .signuperror svg {
                color: var(--destructive);
                translate: 0 calc(var(--spacing) * 0.5);
                width: calc(var(--spacing) * 4);
                height: calc(var(--spacing) * 4);
            }

            .signupbox .signupdetails .signuperror p {
                color: var(--destructive);
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                margin: 0;
                padding: 0;
            }

        .signupbox .signupdetails .signupresult {
            color: var(--card-foreground);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            padding: calc(var(--spacing) * 3);
            border: solid 1px var(--border);
            margin-bottom: calc(var(--spacing) * 4);
        }

            .signupbox .signupdetails .signupresult svg {
                color: var(--card-foreground);
                translate: 0 calc(var(--spacing) * 0.5);
                width: calc(var(--spacing) * 4);
                height: calc(var(--spacing) * 4);
            }


            .signupbox .signupdetails .signupresult p {
                color: var(--muted-foreground);
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                margin: 0;
                padding: 0;
            }

.signedinbox {
    background: var(--card);
    color: var(--card-foreground);
    padding: calc(var(--spacing) * 12);
    border: solid 1px var(--border);
    border-radius: calc(var(--radius) + 4px);
    text-align: center;
}

    .signedinbox svg {
        color: var(--muted-foreground);
        width: calc(var(--spacing) * 16);
        height: calc(var(--spacing) * 16);
        margin-bottom: calc(var(--spacing) * 4);
    }

    .signedinbox h2 {
        font-size: 16px;
        color: var(--card-foreground);
        margin-bottom: calc(var(--spacing) * 4);
    }

    .signedinbox p {
        color: var(--muted-foreground);
        margin-bottom: calc(var(--spacing) * 4);
    }

    .signedinbox .signedinbutton {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
        border-radius: calc(var(--radius) - 2px);
        margin-top: calc(var(--spacing) * 4);
    }

    .signedinbox.bookinglist {
        text-align: left;
        background-color: red;
    }

        .signedinbox.bookinglist h2 {
            font-size: var(--text-lg);
            line-height: var(--text-lg--line-height);
            color: var(--card-foreground);
            margin-bottom: unset
        }

        .signedinbox.bookinglist h3 {
            font-size: 16px;
            color: var(--card-foreground);
            padding-top: calc(var(--spacing) * 4);
            margin-bottom: calc(var(--spacing) * 2);
        }

        .signedinbox.bookinglist p {
            color: var(--muted-foreground);
            margin-bottom: unset;
            margin: 0;
            padding: 0;
            line-height: normal;
        }

.bookinglist {
    padding: calc(var(--spacing) * 8);
    padding-top: 0;
}

    .bookinglist .restitle {
        display: flex;
        align-items: center;
        margin-bottom: calc(var(--spacing) * 3);
    }

        .bookinglist .restitle.wmargin {
            margin-bottom: calc(var(--spacing) * 4);
        }

    .bookinglist svg {
        color: var(--color-blue-600);
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
        vertical-align: middle;
        font-family: var(--font-family);
        margin-right: 1rem;
    }

        .bookinglist svg.icon {
            width: calc(var(--spacing) * 4);
            height: calc(var(--spacing) * 4);
            margin-right: 0.5rem;
        }

        .bookinglist svg.rightm {
            margin-right: 2rem;
        }

        .bookinglist svg.leftm {
            margin-left: 2rem;
        }

    .bookinglist h2 {
        font-size: 16px;
        color: var(--color-blue-900);
        margin: 0;
        padding: 0;
        line-height: normal;
        font-weight: normal;
    }

        .bookinglist h2 .counter {
            color: var(--color-blue-800);
            font-size: var(--text-xs);
            line-height: var(--tw-leading, var(--text-xs--line-height));
            padding-block: calc(var(--spacing) * 0.5);
            padding-inline: calc(var(--spacing) * 2);
            background-color: var(--color-blue-100);
        }

    .bookinglist .resbox {
        background-color: color-mix(in oklab, var(--color-blue-50) 30%, transparent);
        border: solid 2px var(--color-blue-200);
        border-radius: calc(var(--radius) + 4px);
        padding: calc(var(--spacing) * 6);
        margin-bottom: calc(var(--spacing) * 4);
    }

        .bookinglist .resbox.notblue {
            border-color: var(--border);
            background-color: var(--background);
        }

            .bookinglist .resbox.notblue:hover {
                background-color: var(--color-gray-50);
            }

        .bookinglist .resbox h3 {
            font-size: 16px;
            color: var(--card-foreground);
            margin: 0;
            padding: 0;
        }

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

            .bookinglist .resbox p.totaltext {
                color: var(--card-foreground);
                font-size: var(--text-base);
                line-height: var(--text-base--line-height);
                margin-right: 0.5rem;
            }

            .bookinglist .resbox p.total {
                color: var(--card-foreground);
                font-size: var(--text-xl);
                line-height: var(--tw-leading, var(--text-xl--line-height));
            }

        .bookinglist .resbox .booktype {
            color: var(--color-amber-800);
            font-size: var(--text-xs);
            line-height: var(--tw-leading, var(--text-xs--line-height));
            padding: calc(var(--spacing) * 0.5);
            background-color: var(--color-amber-100);
            border: solid 1px var(--color-amber-200);
            border-radius: calc(var(--radius) - 2px);
            margin-left: 1rem;
        }

        .bookinglist .resbox .confirmed {
            color: var(--primary-foreground);
            font-size: var(--text-xs);
            line-height: var(--tw-leading, var(--text-xs--line-height));
            padding-block: calc(var(--spacing) * 0.5);
            padding-inline: calc(var(--spacing) * 2);
            background-color: var(--primary);
            border-radius: calc(var(--radius) - 2px);
            margin-left: 1rem;
        }

        .bookinglist .resbox svg {
            color: var(--card-foreground);
        }

        .bookinglist .resbox .amber {
            color: var(--color-amber-600);
        }

        .bookinglist .resbox .panelbookingdetails {
            border-top: solid 1px var(--border);
            margin-top: calc(var(--spacing) * 6);
            padding-top: calc(var(--spacing) * 6);
        }

            .bookinglist .resbox .panelbookingdetails .quoteinfopanel {
                padding: calc(var(--spacing) * 4);
                background-color: var(--color-blue-50);
                border: solid 1px var(--color-blue-200);
                border-radius: var(--radius);
                margin-bottom: calc(var(--spacing) * 6);
            }

                .bookinglist .resbox .panelbookingdetails .quoteinfopanel p {
                    margin: 0;
                    padding: 0;
                    color: var(--color-blue-800);
                    font-size: var(--text-sm);
                    line-height: var(--tw-leading, var(--text-sm--line-height));
                }

            .bookinglist .resbox .panelbookingdetails h4 {
                font-weight: normal;
                margin-bottom: calc(var(--spacing) * 4);
                font-size: 16px;
            }

            .bookinglist .resbox .panelbookingdetails .panelbookingdetail {
                padding: calc(var(--spacing) * 4);
                background-color: var(--color-white);
                border-radius: var(--radius);
                margin-bottom: calc(var(--spacing) * 3);
            }

                .bookinglist .resbox .panelbookingdetails .panelbookingdetail:last-child {
                    margin-bottom: 0;
                }

                .bookinglist .resbox .panelbookingdetails .panelbookingdetail .itemtitle {
                    margin-bottom: calc(var(--spacing) * 1);
                    color: var(--card-foreground);
                }

                .bookinglist .resbox .panelbookingdetails .panelbookingdetail .details {
                    margin: 0;
                    padding: 0;
                    color: var(--muted-foreground);
                    font-size: var(--text-sm);
                    line-height: var(--tw-leading, var(--text-sm--line-height));
                }

                .bookinglist .resbox .panelbookingdetails .panelbookingdetail .price {
                    margin: 0;
                    padding: 0;
                    color: var(--card-foreground);
                    font-size: 16px;
                }

                .bookinglist .resbox .panelbookingdetails .panelbookingdetail .clientinfo {
                    margin-bottom: calc(var(--spacing) * 3);
                }

                .bookinglist .resbox .panelbookingdetails .panelbookingdetail svg {
                    color: var(--muted-foreground);
                    width: calc(var(--spacing) * 4);
                    height: calc(var(--spacing) * 4);
                }

                .bookinglist .resbox .panelbookingdetails .panelbookingdetail .contacttitle {
                    margin: 0;
                    padding: 0;
                    color: var(--muted-foreground);
                    font-size: var(--text-sm);
                    line-height: var(--tw-leading, var(--text-sm--line-height));
                    padding-top: calc(var(--spacing) * 1);
                }

                .bookinglist .resbox .panelbookingdetails .panelbookingdetail .contacttext {
                    margin: 0;
                    padding: 0;
                    font-size: 16px;
                    color: var(--card-foreground);
                }


    .bookinglist .makebooking {
        padding-top: calc(var(--spacing) * 4);
        text-align: center;
    }

    .bookinglist .gobutton {
        display: inline-flex;
        align-items: center;
        padding: calc(var(--spacing) * 2.5);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        background-color: var(--primary);
        border: solid 1px var(--primary);
        border-radius: calc(var(--radius) - 2px);
        justify-content: center;
        height: calc(var(--spacing) * 8);
        cursor: pointer;
    }

        .bookinglist .gobutton svg {
            width: calc(var(--spacing) * 4);
            height: calc(var(--spacing) * 4);
            flex-shrink: 0;
            margin-right: 0.5rem;
            color: var(--primary-foreground);
        }

        .bookinglist .gobutton span {
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
            flex-shrink: 0;
            color: var(--primary-foreground);
        }

        .bookinglist .gobutton:hover {
            background-color: var(--primary-foreground);
            color: var(--primary);
        }

            .bookinglist .gobutton:hover span, .bookinglist .gobutton:hover svg {
                color: var(--primary);
            }

    .bookinglist .restitle.notblue svg {
        color: var(--muted-foreground);
    }

    .bookinglist .restitle.notblue svg, .bookinglist .restitle.notblue h2 {
        color: var(--muted-foreground);
    }

    .bookinglist .restitle.notblue .counter {
        color: var(--secondary-foreground);
        background-color: var(--secondary);
    }