@font-face {
    font-family: "Great Vibes";
    src: url("../fonts/GreatVibes-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    src: url("../fonts/Merriweather-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    src: url("../fonts/Merriweather-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html,
body {
    font-family: "Merriweather", serif;
    background-color: #f6f2ef !important;
    background-image: none !important;
}

@media (max-width: 768px) {
    html,
    body {
        background-color: #f3eeea !important;
    }

    #main.container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100%;
    }

    #main > .wrapper {
        --bs-gutter-x: 0;
        align-items: flex-start !important;
        margin-top: 0;
    }

    #book-appointment-wizard {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

#book-appointment-wizard,
#book-appointment-wizard.bg-body,
#book-appointment-wizard .wizard-frame {
    background-color: #f3eeea !important;
}

#book-appointment-wizard #company-name {
    font-family: "Great Vibes", cursive;
    font-size: 2em;
    font-weight: lighter;
    color: #800080 !important;
}

#book-appointment-wizard .frame-title {
    font-family: "Great Vibes", cursive;
    font-weight: lighter;
    text-align: center;
    color: #666;
}

#book-appointment-wizard #company-name .display-booking-selection {
    font-size: 60%;
    font-weight: normal;
    color: #f3e2cd !important;
    filter: brightness(0.35);
}

#book-appointment-wizard #company-logo {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-height: 100px;
    width: auto;
    height: auto;
}

@media (min-width: 992px) {
    #book-appointment-wizard #company-logo {
        display: inline-block;
        float: left;
        margin-left: 0;
        margin-right: 14px;
        max-height: 75px;
    }
}

#book-appointment-wizard #header.bg-primary {
    background-color: #f3e2cd !important;
}

@media (max-width: 991.98px) {
    #book-appointment-wizard #header {
        padding: 10px 15px !important;
    }

    #book-appointment-wizard #company-name {
        margin: 5px 0 !important;
        line-height: normal;
    }

    #book-appointment-wizard #company-logo {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }

    #book-appointment-wizard #steps {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
}

#book-appointment-wizard .frame-container {
    min-height: 0 !important;
}

#book-appointment-wizard .command-buttons {
    margin-top: 0 !important;
}

#book-appointment-wizard .book-step.active-step,
#book-appointment-wizard .book-step:not(.active-step) {
    background: #f3e2cd !important;
    filter: brightness(0.95);
}

#book-appointment-wizard .book-step.active-step strong,
#book-appointment-wizard .book-step:not(.active-step) strong {
    color: #f3e2cd !important;
    filter: brightness(2);
}

#book-appointment-wizard .button-next .fa-chevron-right {
    display: none !important;
}

#book-appointment-wizard .button-next {
    color: #800080 !important;
    background-color: #f7e1cb !important;
    border-color: #f7e1cb !important;
    font-family: "Great Vibes", cursive !important;
    font-size: x-large !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 140px;
}

#book-appointment-wizard .button-next:hover {
    background-color: #e6d0ba !important;
    border-color: #e6d0ba !important;
    color: #800080 !important;
}

#book-appointment-wizard .button-back,
#book-appointment-wizard .button-back .fa-chevron-left {
    color: #800080 !important;
}

#book-appointment-wizard .button-back {
    background-color: #f7e1cb !important;
    border-color: #f7e1cb !important;
    font-family: "Great Vibes", cursive !important;
    font-size: x-large !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 140px;
    opacity: 0.5 !important;
}

#book-appointment-wizard .button-back:hover {
    background-color: #e6d0ba !important;
    border-color: #e6d0ba !important;
    color: #800080 !important;
    opacity: 0.8 !important;
}

#book-appointment-wizard .button-back .fa-chevron-left {
    display: none !important;
}

#book-appointment-wizard .flatpickr-calendar {
    box-shadow: none !important;
}

#book-appointment-wizard .flatpickr-calendar.inline.arrowTop::before,
#book-appointment-wizard .flatpickr-calendar.inline.arrowTop::after {
    display: none;
}

#book-appointment-wizard .flatpickr-months,
#book-appointment-wizard .flatpickr-months .flatpickr-month,
#book-appointment-wizard .flatpickr-weekdays,
#book-appointment-wizard .flatpickr-current-month .flatpickr-monthDropdown-months,
#book-appointment-wizard .flatpickr-weekday {
    background: #f3e2cd !important;
    color: #666 !important;
    font-family: "Merriweather", serif !important;
    font-weight: bold !important;
}

#book-appointment-wizard .flatpickr-current-month .numInput.cur-year,
#book-appointment-wizard .flatpickr-monthDropdown-months {
    color: #666 !important;
    font-family: "Merriweather", serif !important;
    font-weight: bold !important;
    background: transparent !important;
}

#book-appointment-wizard .flatpickr-prev-month svg,
#book-appointment-wizard .flatpickr-next-month svg {
    fill: #666 !important;
}

#book-appointment-wizard .flatpickr-day {
    color: #484848;
}

#book-appointment-wizard .flatpickr-day.flatpickr-disabled,
#book-appointment-wizard .flatpickr-day.prevMonthDay,
#book-appointment-wizard .flatpickr-day.nextMonthDay {
    color: rgba(72, 72, 72, 0.1) !important;
}

#book-appointment-wizard .flatpickr-day.prevMonthDay,
#book-appointment-wizard .flatpickr-day.nextMonthDay {
    height: 0;
    width: 0;
    visibility: hidden;
}

#book-appointment-wizard .flatpickr-day:hover {
    background: #e6d0ba !important;
    border-color: #e6d0ba !important;
}

#book-appointment-wizard .flatpickr-day.selected,
#book-appointment-wizard .flatpickr-day.selected:hover {
    background: #f3e2cd !important;
    border-color: #f3e2cd !important;
    color: #800080 !important;
}

body:has(#message-frame) {
    background-color: #f6f2ef !important;
}

@media (max-width: 768px) {
    body:has(#message-frame) {
        background-color: #f3eeea !important;
    }
}

#message-frame {
    background: #f3eeea !important;
    padding: 0 0 15px !important;
    max-width: 700px;
    margin: 0 auto;
    box-shadow: none !important;
    border-radius: 5px;
    overflow: hidden;
}

#message-header {
    background: #f3e2cd;
    text-align: center;
    padding: 10px 15px 10px;
}

#message-header img {
    display: block;
    margin: 3px auto;
    max-height: 100px;
    width: auto;
}

#message-header > span {
    display: block;
    font-size: 1.8em;
    font-weight: lighter;
    color: #800080;
    font-family: "Great Vibes", cursive;
}

#message-frame h4 {
    font-family: "Great Vibes", cursive;
    font-weight: lighter;
    color: #666;
}

#message-frame .btn {
    min-width: 230px;
    color: #800080 !important;
    background-color: #f7e1cb !important;
    border-color: #f7e1cb !important;
    font-family: "Great Vibes", cursive !important;
    font-size: x-large !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#message-frame .btn:hover {
    background-color: #e6d0ba !important;
    border-color: #e6d0ba !important;
    color: #800080 !important;
}

@media (max-width: 768px) {
    #message-frame .btn {
        min-width: 300px;
        margin: 0 auto;
    }
}

#message-frame .mt-2 a {
    color: inherit;
}

#book-appointment-wizard .available-hour {
    color: #666 !important;
    background-color: transparent !important;
    border-color: #666 !important;
    font-weight: normal !important;
}

#book-appointment-wizard #appointment-details .fw-bold,
#book-appointment-wizard #customer-details .fw-bold {
    font-family: "Great Vibes", cursive !important;
}

@media (max-width: 991.98px) {
    #book-appointment-wizard #appointment-details > div,
    #book-appointment-wizard #customer-details > div {
        width: max-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: left !important;
    }
}

#book-appointment-wizard .available-hour:hover {
    color: #800080 !important;
    background-color: #e6d0ba !important;
    border-color: #800080 !important;
    font-weight: bold !important;
}

#book-appointment-wizard #available-hours .selected-hour,
#book-appointment-wizard #available-hours .selected-hour:hover {
    background-color: #f3e2cd !important;
    border-color: #666 !important;
    color: #800080 !important;
    font-weight: normal !important;
}

#header #header-logo h6 {
    color: #800080 !important;
}

#header #header-logo small {
    color: #333 !important;
}

.short-notice-hint {
    margin: 0 0 8px;
    font-family: "Merriweather", serif;
    font-size: 13px;
    line-height: 1.45;
    color: #666;
    text-align: left;
}

.short-notice-hint a {
    color: #800080;
}

.btn-outline-secondary {
    color: #666 !important;
    border-color: #666 !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus {
    background-color: #e6d0ba !important;
    border-color: #e6d0ba !important;
    color: #666 !important;
}

.gehweg,
#book-appointment-wizard #frame-footer {
    display: none !important;
}