/* ////////////////////////////////////////////////////////////////
BASIC STYLES
////////////////////////////////////////////////////////////////*/


body {
    background: var(--gray) !important;
}

.baummuster {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.023;
    object-fit: cover;
}

.success p, .success h2 {
    color: #fff;
}


/* ////////////////////////////////////////////////////////////////
SPA RESERVATION
////////////////////////////////////////////////////////////////*/

body [id^=pjWrapper] {
    font-size: 15px !important;
    background-color: transparent !important;
}

[id^=pjWrapper] .panel {
    background-color: transparent !important;;
}

[id^=pjWrapper] .h2, [id^=pjWrapper] h2 {
    font-size: 14px !important;
    letter-spacing: 2.5px;
    text-transform: uppercase !important;
}

[id^=pjWrapper] .btn-group-sm>.btn, [id^=pjWrapper] .btn-sm {
    border-radius: 0px !important;
}

.spareservation h1 {
    font-family: var(--subtitle-font) !important;
    text-transform: none !important;
    color: var(--background) !important;
    font-size: min(max(3rem, 5.7vw), 5.7rem) !important;
    margin: 0 1rem;
}

#pjWrapperAppScheduler_1 * {
    font-family: var(--common-font), sans-serif !important;
}

h2.pjAsHeadTitle {
    padding: 7px 0 !important;
}

.pj-calendar-day-past p, .pj-calendar-day-inactive p {
    background: #ebe7df !important;
    color: #82807b !important;
}


#pjWrapperAppScheduler_1 .pjAsTableTimes .pjAsTimeAvailable a {
    background: var(--brightgreen) !important;
    color: var(--white) !important;
}

#pjWrapperAppScheduler_1 .pjAsTableTimes .pjAsTimeBooked a {
    background: #b3767b !important;
    color: #fff !important;
    pointer-events: none !important;
}

span.pjAsTimeAvailable.pjAsTimeBooked {
    cursor: not-allowed !important;
}

[id^=pjWrapper] .panel {
    border: 0px solid transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

[id^=pjWrapper] .panel-heading {
    border-bottom: 0px solid transparent !important;
}

#pjWrapperAppScheduler_1 .pjAsContainer .pjAsHead {
    background: transparent !important;
    padding: 20px 0 !important;
}

[id^=pjWrapper] .form-control {
    border: 1px solid #ccc !important;
}

.pj-calendar-ym {
    color: var(--black) !important;
}

[id^=pjWrapper] a {
    color: var(--midgreen) !important;
}

#pjWrapperAppScheduler_1 .pjAsTableTimes .pjAsTimeSelected a {
    background: var(--highlight) !important;
    color: #fff !important;
}


/* ////////////////////////////////////////////////////////////////
SELECTING PAGE
////////////////////////////////////////////////////////////////*/

.pj-calendar {
    padding: 0 0 10px !important;
}

.pj-calendar-day {
    background: #dddddd !important;
}

.pj-calendar-day p {
    color: var(--highlight) !important;
}

.pj-calendar-day p:hover {
    background: var(--highlight) !important;
    color: #fff !important;
}

.pj-calendar-day-selected p {
    background: var(--highlight) !important;
    color: #fff !important;
}

.pj-calendar-day-booked p:hover, .pj-calendar-day-booked p {
    background: #b3767b !important;
    color: #fff !important;
}

#pjWrapperAppScheduler_1 .pjAsSelectedDateWrapper .pjAsSelectedDate strong {
    color: var(--highlight) !important;
}

[id^=pjWrapper] .text-primary {
    color: var(--green) !important;
}

#pjWrapperAppScheduler_1 .pjAsBtnPrimary, #pjWrapperAppScheduler_1 button {
    border-color: var(--highlight) !important;
    color: #fff;
    background: var(--highlight) !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    border-radius: 4px !important;
    padding: 7px 12px !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4781af', endColorstr='#3e7baa',GradientType=0 );
}

.pj-calendar-actions .btn-primary {
    border-color: var(--highlight) !important;
    color: #fff !important;
    background: var(--highlight) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4781af', endColorstr='#3e7baa',GradientType=0 );
}

#pjWrapperAppScheduler_1 .pjAsBtnSecondary {
    border-color: var(--orange) !important;
    color: #fff !important;
    text-transform: uppercase;
    background: var(--orange) !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#939aa0', endColorstr='#868f96',GradientType=0 );
}

#pjWrapperAppScheduler_1 .pjAsListElement {
    padding: 0 0px 0px !important;
}

[id^=pjWrapper] .panel-body {
    padding: 0 !important;
}

[id^=pjWrapper] .glyphicon-chevron-right:before {
    content: "" !important;
    background-image: url("/static/images/arrow-right.svg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 20px !important;
    height: 10px !important;
    display: block;
    margin-left: 5px;
}

[id^=pjWrapper] .pj-calendar-actions .btn-primary .glyphicon-chevron-right:before {
    filter: brightness(100) !important;
}

[id^=pjWrapper] .glyphicon-chevron-left:before, .fa-angle-double-left:before {
    content: "" !important;
    background-image: url("/static/images/arrow-right.svg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transform: rotate(180deg) !important;
    width: 20px !important;
    height: 10px !important;
    display: block;
    margin-right: 5px;
}

[id^=pjWrapper] .pj-calendar-actions .btn-primary .glyphicon-chevron-left:before {
    filter: brightness(100) !important;
}

.form-group.row.align-items-center {
    align-items: center;
}

.pjAsTableTimes {
    padding: 0 10px !important;
}

[id^=pjWrapper] .panel>.list-group:last-child .list-group-item:last-child, [id^=pjWrapper] .panel>.panel-collapse>.list-group:last-child .list-group-item:last-child {
    border-bottom: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

#pjWrapperAppScheduler_1 .pjAsTableTimes a.pjAsSlotAvailable {
    border: 1px solid var(--mid-grey) !important;
}

[id^=pjWrapper] .list-group-item {
    border: solid 1px var(--background) !important;
    background-color: var(--background) !important;
    padding: 20px 40px !important;
}

[id^=pjWrapper] .pjAsAddToCartForm ul.list-group.pjAsSelectedDateWrapper li.list-group-item {
    padding: 20px 10px !important;
}

[id^=pjWrapper] ul.list-group.pjAsSelectedDateWrapper li.list-group-item {
    padding: 20px 40px !important;
}

#pjWrapperAppScheduler_1 .pjAsNavCalendarDate {
    margin: 10px 0;
    border-top: solid 1px var(--mid-grey);
    border-bottom: solid 1px var(--mid-grey);
    padding: 10px 0;
}

.pj-calendar, .pj-calendar-head {
    background: var(--background) !important;
}

.pj-calendar-day-disabled p {
    background: var(--background) !important;
    color: #45494a !important;
    }

.pjAsCalendarDate p {
    background-color: var(--brightgreen) !important;
    color: var(--white) !important;
}

.pj-calendar-day.pjAsCalendarDate.pj-calendar-day-selected p {
    background-color: var(--green) !important;
    color: var(--white) !important;
}



/* ////////////////////////////////////////////////////////////////
BOOKING PAGE
////////////////////////////////////////////////////////////////*/

a.btn.btn-link.pjAsBtnLink.pjAsBtnCart {
    padding: 0 !important;
    margin: 0 !important;
}

button#apply_code {
    float: left !important;
}

#pjWrapperAppScheduler_1 .pjAsChosenServices .pjAsServiceTitle {
    font-size: 14px !important;
    color: var(--gray) !important;
    text-transform: none;
}

#pjWrapperAppScheduler_1 .pjAsChosenService p {
    color: var(--black) !important;
}

li.list-group-item.pjCrProductExtra p {
    font-size: 14px !important;
    color: var(--gray) !important;
}

p#discount_amount, p#after_discount, p#vat_amount, p#total_amount {
    float: right;
}

@media screen and (max-width: 768px) {
    p#discount_amount, p#after_discount, p#vat_amount, p#total_amount {
        float: left !important;
    }
}


p#total_amount {
    color: var(--orange) !important;
}

li.list-group-item.pjCrProductExtra h4 {
    color: var(--black) !important;
    font-size: 14px !important;
    text-transform: none !important;
}

li.list-group-item.pjCrProductExtra {
    border-top: solid 1px var(--mid-grey) !important;
}

h3.text-uppercase.pjAsSectionTitle {
    color: var(--black) !important;
    font-size: 18px !important;
    text-transform: none;
}

.form-horizontal {
    padding: 40px 45px !important;
    background: var(--background) !important;
}

[id^=pjWrapper] .form-control {
    border: 0px solid #ccc !important;
    border-bottom: solid 1px var(--green) !important;
    background: var(--mid-grey) !important;
    box-shadow: none !important;
}

#pjWrapperAppScheduler_1 .pjAsCheckout .control-label {
    color: var(--black) !important;
}

#pjWrapperAppScheduler_1 .panel.panel-default.pjAsContainer > h2 {
    color: var(--white) !important;
    font-family: var(--title-font) !important;
    letter-spacing: 2.5px;
    font-size: 14px !important;
    text-transform: uppercase !important;
    background: var(--orange) !important;
    padding: 10px 20px !important;
    margin-bottom: 20px !important;
    border-radius: 4px !important;
}

#pjWrapperAppScheduler_1 .panel.panel-default.pjAsContainer h2.pjAsHeadTitle {
    color: var(--brightgreen) !important;
    font-family: var(--title-font) !important;
    letter-spacing: 2.5px;
    font-size: 14px !important;
    text-transform: uppercase !important;
}

#pjWrapperAppScheduler_1 .panel-body.pjAsBody.pjAsCheckout h3.text-uppercase.pjAsSectionTitle {
    font-family: var(--title-font) !important;
    color: var(--brightgreen) !important;
    font-size: 14px !important;
    letter-spacing: 2.5px;
    text-transform: uppercase !important;
}

.panel-body.pjAsBody.pjAsCheckout {
    padding-top: 30px !important;
}

img#pjAsCaptchaImage_1 {
    width: 100px !important;
}

label[for="terms_1"] input {
    margin-left: -20px !important;
}

p.form-control-static {
    font-size: 16px !important;
    color: var(--black) !important;
}

[id^=pjWrapper] .alert-warning {
    color: var(--white) !important;
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    font-size: 18px;
}

a.alert-link.pjAsBtnBackToServices {
    color: var(--brown) !important;
}