@mixin desktop_large {
    @media (max-width: 1700px) {
        @content;
    }
}

@mixin desktop_large_min {
    @media (min-width: 1701px) {
        @content;
    }
}

@mixin desktop {
    @media (max-width: 1500px) {
        @content;
    }
}

@mixin desktop_min {
    @media (min-width: 1501px) {
        @content;
    }
}

@mixin desktop_small {
    @media (max-width: 1400px) {
        @content;
    }
}

@mixin desktop_small_min {
    @media (min-width: 1401px) {
        @content;
    }
}

@mixin tablet_landscape {
    @media (max-width: 1200px) {
        @content;
    }
}

@mixin tablet_landscape_min {
    @media (min-width: 1201px) {
        @content;
    }
}

@mixin tablet {
    @media (max-width: 991px) {
        @content;
    }
}

@mixin tablet_min {
    @media (min-width: 992px) {
        @content;
    }
}

@mixin phone_landscape {
    @media (max-width: 820px) and (orientation : landscape) {
        @content;
    }
}

@mixin phone_landscape_min {
    @media (min-width: 820px) and (orientation : landscape) {
        @content;
    }
}

@mixin phone {
    @media (max-width: 767px) {
        @content;
    }
}

@mixin phone_min {
    @media (min-width: 768px) {
        @content;
    }
}

@mixin tiny {
    @media (max-width: 360px) {
        @content;
    }
}

@mixin ie11 {
    @media all and (-ms-high-contrast:none) {
        @media (min-width: 1201px) {
            @content;
        }
    }
}


// Custom
@mixin mq($width) {
    @media (max-width: $width+"px") {
        @content;
    }
}

@mixin mqmin($width) {
    @media (min-width: $width+"px") {
        @content;
    }
}

@mixin input_focus {
    border-color: rgb(190 205 255);
    outline: 1px solid rgb(190 205 255);
}

@mixin input_hover {
    border-color: rgb(190 205 255);
}

@mixin transition {
    -moz-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}


@import "style-admin-old.scss";

$wpbs_text_color: #202327;
$wpbs_header_color: #2d3338;
$wpbs_light_text_color: #64696d;
$wpbs_lighter_text_color: #a2a2a5;
$wpbs_blue_text: #5677d1;
$wpbs_blue: #5683fd;
$wpbs_green: #00A32A;
$wpbs_yellow: #dba617;
$wpbs_red: #d63638;
$wpbs_border_color: #e5e5e5;
$wpbs_dark_border_color: #c4c4c4;
$wpbs_light_bg: #f3f3f3;
$wpbs_lighter_bg: #fafafa;
$wpbs_body_bg: #e8e8e8;


body[class*="wp-booking-system_page"] {
    #wpwrap {
        min-height: 100%;
        background-color: $wpbs_body_bg;

        .tablenav-pages {
            .tablenav-paging-text {
                @include phone {
                    font-size: 14px;
                }
            }

            a,
            span {

                &.wpbs-secondary-button,
                &.wpbs-secondary-button {
                    padding: 0;
                    margin: 0;
                    width: 30px !important;
                    height: 30px !important;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    line-height: 24px;
                    text-align: center;
                    font-size: 20px;
                    display: inline-block;
                    min-width: 0 !important;

                    &.disabled {
                        opacity: 0.5;
                    }
                }

                &:focus {
                    -webkit-box-shadow: none;
                    box-shadow: none;
                }
            }
        }

        #wpcontent {
            padding-left: 0;
            display: flex;
            flex-direction: column;
            height: auto;
            min-height: 100%;

            #wpbody {
                flex: 1;
                display: flex;
                flex-direction: column;

                #wpbody-content {
                    flex: 1;
                    float: none;
                    display: flex;
                    flex-direction: column;

                    >.notice.update-nag {
                        display: none !important;
                    }
                }
            }

            .wpbs-wrap {
                margin: 0;
                flex: 1;
                display: flex;
                flex-direction: column;
                background-color: $wpbs_body_bg;

                h2 {
                    font-size: 20px;
                    line-height: 150%;
                    margin: 16px 0;
                    color: $wpbs_text_color;
                    font-weight: 500;

                    @include phone {
                        font-size: 18px;
                        margin: 12px 0;
                    }

                    &:first-child {
                        margin-top: 0;
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }


                }

                h3 {
                    font-size: 16px;
                    line-height: 150%;
                }

                h3,
                h4 {
                    color: $wpbs_text_color;
                }

                h2,
                h3,
                h4 {
                    .wpbs-heading-description {
                        display: block;
                        font-size: 12px !important;
                        color: $wpbs_light_text_color !important;
                        margin-top: 6px !important;
                        line-height: 150%;
                        font-weight: normal;
                    }
                }
            }
        }
    }

    #wpfooter {
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #1d2327;
        color: #ffffff;

        * {
            color: #ffffff;
        }
    }
}


// Plugin Header
.wpbs-plugin-header {
    background-color: #fff;
    padding: 20px;
    z-index: 100;
    box-shadow: 0px 1px 2px rgba(32, 35, 39, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: $wpbs_header_color;

    @at-root .show-mobile-menu & {
        position: relative;
        padding-top: 10px;
        padding-bottom: 10px;
        z-index: 110;
    }

    @include tablet_landscape {
        position: relative;
        padding-top: 10px;
        padding-bottom: 10px;
        z-index: 110;
    }

    @include phone {
        padding: 10px 16px;
    }

    // Logo
    #wpbs-logo {
        display: block;
        max-width: 220px;
        margin-left: auto;
        margin-right: 0;

        @include desktop {
            max-width: 200px;
        }

        @include desktop_small {
            max-width: 180px;
        }

        @media screen and (max-width: 1300px) {
            max-width: 160px;
        }

        @include tablet_landscape {
            max-width: 220px;
        }

        @include phone {
            max-width: 160px;
        }

        img {
            display: block;
            max-width: none;
            width: 100%;
            height: auto;
        }
    }


    // Menu
    .js-wpbs-open-menu-button {
        text-decoration: none;
        display: inline-block;
        padding: 10px 16px;
        border-radius: 5px;
        color: $wpbs_text_color;
        font-weight: 500;
        border: 1px solid $wpbs_text_color;
    }


    // Mobile Menu Button
    .js-wpbs-mobile-main-menu-button {
        position: relative;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        z-index: 4;
        display: none;
        background-color: $wpbs_blue;

        @at-root .show-mobile-menu & {
            display: block;
        }

        @include tablet_landscape {
            display: block;
        }

        @include phone {
            width: 36px;
            height: 36px;
        }

        @include tiny {
            width: 34px;
            height: 34px;
        }

        .text {
            text-decoration: none;
            color: #ffffff;
            font-weight: 600;
            font-size: 16px;
            position: absolute;
            left: 50px;
            top: 50%;
            transform: translate(0, -50%);

            @include phone {
                font-size: 14px;
                left: 44px;
            }
        }

        svg {
            width: 160%;
            height: 160%;
            position: absolute;
            display: block;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        path {
            fill: none;
            stroke: #ffffff;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-linejoin: round;
            --length: 24;
            --offset: -38;
            stroke-dasharray: var(--length) var(--total-length);
            stroke-dashoffset: var(--offset);
            -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
            -o-transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
            transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
        }

        &.active svg {

            .line--1,
            .line--3 {
                --length: 22.627416998;
            }

            .line--2 {
                --length: 0;
            }
        }

        &.active+svg {

            .line--1,
            .line--3 {
                --length: 8.602325267;
            }
        }

        .menu--1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: block;

            .line--1,
            .line--3 {
                --total-length: 126.64183044433594;
            }

            .line--2 {
                --total-length: 70;
            }
        }

        &.active svg {

            .line--1,
            .line--3 {
                --offset: -94.1149185097;
            }

            .line--2 {
                --offset: -50;
            }
        }
    }

    nav {
        position: relative;

        @include tablet_landscape {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            position: absolute;
            left: 0;
            top: 100%;
            width: 100%;
            z-index: 2;
            @include transition;
            background-color: $wpbs_header_color;
        }

        @at-root .show-mobile-menu & {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            position: absolute;
            left: 0;
            top: 100%;
            width: 100%;
            z-index: 2;
            @include transition;
            background-color: $wpbs_header_color;
        }

        @at-root .wpbs-mobile-menu-visible & {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
        }

        @at-root .show-mobile-menu.wpbs-mobile-menu-visible & {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            white-space: nowrap;

            @at-root .show-mobile-menu & {
                display: block;

                li {
                    display: block;

                    a {
                        display: block;
                        padding: 12px 20px;
                        margin: 0;
                        border-radius: 0px;
                    }
                }
            }

            @include tablet_landscape {
                display: block;
            }

            li {
                padding: 0;
                margin: 0;

                &:before {
                    display: none;
                }

                @include tablet_landscape {
                    display: block;
                    border-top: 1px solid rgba($wpbs_border_color, 0.25);
                }

                a {
                    display: inline-block;
                    text-decoration: none;
                    padding: 8px 12px;
                    margin-right: 5px;
                    border-radius: 5px;
                    border: 1px solid transparent;
                    color: #ffffff;
                    font-size: 13px;
                    line-height: 16px;
                    outline: none;
                    font-weight: 500;
                    @include transition;

                    @include tablet_landscape_min {
                        &:hover {
                            border-color: $wpbs_blue;
                        }
                    }

                    @include desktop_small {
                        padding: 6px 10px;
                    }

                    @media screen and (max-width: 1300px) {
                        padding: 6px 7px;
                    }

                    @include tablet_landscape {
                        display: block;
                        padding: 12px 20px;
                        margin: 0;
                        border-radius: 0px;
                    }
                }

                &.active {
                    a {
                        border-color: $wpbs_blue;
                        background-color: $wpbs_blue;
                        color: #ffffff;
                    }
                }
            }
        }
    }
}


.wpbs-header-buttons {
    display: flex;

    @include tablet_landscape {
        // flex-basis: 100%;
        // margin-top: 10px;
    }

    @at-root .wp-booking-system_page_wpbs-discounts .wpbs-wrap-edit-discount & {
        @include tablet_landscape {
            flex-basis: 100%;
            margin-top: 10px;
        }
    }

    @at-root .wp-booking-system_page_wpbs-coupons .wpbs-wrap-edit-coupon & {
        @include tablet_landscape {
            flex-basis: 100%;
            margin-top: 10px;
        }
    }

    @at-root .wp-booking-system_page_wpbs-calendars .wpbs-wrap-edit-calendar & {
        @include tablet_landscape {
            flex-basis: 100%;
            margin-top: 10px;
        }
    }

    .wpbs-primary-button,
    .wpbs-secondary-button {

        &+.wpbs-primary-button,
        &+.wpbs-secondary-button {
            margin-left: 8px;
        }
    }

    .wpbs-reporting-date-interval {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 24px;

        @include phone {
            margin-top: 16px;
        }

        .wpbs-form-field {
            margin: 0;
        }
    }
}


// Plugin Sticky Header
.wpbs-plugin-sticky-header {
    position: sticky;
    top: 32px;
    z-index: 101;
    background: #ffffff;
    box-shadow: 0px 1px 2px rgba(32, 35, 39, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;

    &.wpbs-plugin-sticky-header-in-tab {
        margin: -20px 0 30px -20px;
        position: static;
        width: 100%;
    }

    @media screen and (max-width: 782px) {
        top: 46px;
    }

    @include phone {
        padding: 16px 16px;
    }

    @media screen and (max-width: 600px) {
        top: 0;
    }

    // Page Heading
    .wpbs-page-heading {
        display: inline-block;
        font-size: 23px;
        line-height: 30px;
        font-weight: 400;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        color: $wpbs_text_color;

        @include tablet_landscape {
            font-size: 20px;
            line-height: 26px;
        }

        .wpbs-page-heading-editable {
            margin: 0 0 0 24px;
        }
    }

    .wpbs-header-buttons-left {
        margin-right: auto;
        margin-left: 12px;

        @include phone {
            margin-right: 0;
            margin-left: auto;
        }
    }

    #titlewrap {
        display: flex;
        align-items: center;

        a {
            margin: 0 0 0 6px;
            padding-top: 9px;
            padding-bottom: 9px;
        }
    }

    .titlewrap-translations {
        display: none;
        flex-basis: 100%;
        margin-top: 12px;
        margin-bottom: -12px;
    }

    .wpbs-reporting-date-interval {
        .wpbs-form-field {
            display: flex;
            align-items: center;

            label {
                margin: 0 10px 0 0;

                @include phone {
                    display: none;
                }
            }
        }
    }
}




// Plugin Body
.wpbs-plugin-wrapper {
    flex: 1;
    padding: 0 20px 20px 20px;
    background-color: $wpbs_body_bg;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    @include phone {
        display: block;
        padding: 0 16px 16px 16px;
    }

    .wpbs-box {
        background-color: #ffffff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid $wpbs_border_color;
        border-radius: 10px;
        box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
        flex-basis: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        overflow: hidden;

        &:not(.wpbs-box-half)+.wpbs-box-half {
            margin-top: 24px;
        }

        &:not(.wpbs-box-half)+.wpbs-box-half+.wpbs-box-half {
            margin-top: 24px;
        }

        &:not(.wpbs-no-overflow) {
            overflow-x: clip;
        }

        @include phone {
            &+.wpbs-box {
                margin-top: 24px;
            }
        }

        &.wpbs-enable-overflow {
            overflow: visible;

            .wpbs-box-header {
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
            }

            .wpbs-box-content {
                border-bottom-left-radius: 6px;
                border-bottom-right-radius: 6px;
            }
        }

        &.wpbs-no-overflow {
            width: 100%;

            >form {
                width: 100%;

                .wpbs-box-content {
                    width: 100%;
                }
            }
        }

        &.wpbs-box-centered {
            margin-left: auto;
            margin-right: auto;
            max-width: 640px;
        }

        &.wpbs-transparent {
            background-color: $wpbs_body_bg;
            box-shadow: none;
            border: none;
            border-radius: 0px;

            .wpbs-box-header {
                background-color: $wpbs_body_bg;
            }

            .wpbs-box-content {
                background-color: $wpbs_body_bg;
            }
        }

        &.wpbs-box-half {
            flex-basis: calc(50% - 12px);
        }

        .wp-heading-inline:empty {
            display: none;
        }

        &.has-sidebar {
            display: flex;

            .wpbs-box-sidebar {
                flex-basis: 250px;
                background-color: $wpbs_light_bg;
                margin-right: 0;
            }

            .wpbs-box-content {
                flex: 1;
            }
        }

        >form {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            height: 100%;
            max-width: 100%;
        }

        .wpbs-box-content {
            padding: 20px 20px 32px 20px;
            font-size: 14px;
            line-height: 130%;
            color: $wpbs_text_color;
            flex: 1;
            background-color: $wpbs_lighter_bg;
            max-width: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            &.wpbs-active-tab-email-notifications:not(.wpbs-email-notification-edit-screen) {
                background: $wpbs_light_bg;
            }

            @include phone {
                padding: 16px;

                >p:first-child {
                    margin-top: 0;
                }

                >p:last-child {
                    margin-bottom: 0;
                }
            }

            &.wpbs-no-padding {
                padding: 0;
                padding-bottom: 0 !important;
                background: transparent;
            }

            .wpbs-box-content-inner {
                max-width: 700px;
            }
        }
    }
}






// Buttons
.wpbs-buttons {
    display: flex;
    align-items: center;

    input,
    a,
    button {
        margin: 0;
        display: inline-block;

        &+input,
        &+a,
        &+button {
            margin-left: 8px !important;
        }

        &[style*="display: none"] {

            &+input,
            &+a,
            &+button {
                margin-left: 0 !important;
            }
        }
    }
}

.wpbs-primary-button {
    text-decoration: none;
    font-weight: 500;
    color: #fff;
    font-size: 13px;
    line-height: 16px;
    border: 1px solid $wpbs_blue;
    background-color: $wpbs_blue;
    display: inline-block;
    padding: 9px 12px;
    border-radius: 5px;
    transition-property: background-color;
    transition-duration: .1s;
    transition-timing-function: ease-in-out;

    @include tablet_landscape_min {
        &:hover {
            background-color: darken($wpbs_blue, 10%);
            color: #fff !important;
            cursor: pointer;
        }

        &:active {
            color: #fff !important;
            background-color: darken($wpbs_blue, 10%);
        }

        &:not(.wpbs-disabled-button):focus {
            color: #fff !important;
            background-color: darken($wpbs_blue, 10%);
            box-shadow: none;
            outline: 2px solid $wpbs_blue;
        }
    }

    @include tablet_landscape {
        &:active {
            color: #fff !important;
            background-color: darken($wpbs_blue, 10%);
        }

        &:focus {
            color: #fff !important;
            background-color: darken($wpbs_blue, 10%);
            box-shadow: none;
            outline: 2px solid $wpbs_blue;
        }
    }

    &.wpbs-remove-button {
        background-color: $wpbs_red;
        border-color: $wpbs_red;
        padding-top: 9px;
        padding-bottom: 9px;

        i {
            position: relative;
            top: 1px;
            font-size: 14px;
            display: inline-block;
        }

        @include tablet_landscape_min {
            &:hover {
                background-color: darken($wpbs_red, 10%);
                color: #fff;
                cursor: pointer;
            }

            &:active {
                color: #fff;
                background-color: darken($wpbs_red, 10%);
            }

            &:focus {
                color: #fff;
                background-color: darken($wpbs_red, 10%);
                box-shadow: none;
                outline: 2px solid $wpbs_red;
            }
        }

        @include tablet_landscape {
            &:active {
                color: #fff;
                background-color: darken($wpbs_red, 10%);
            }

            &:focus {
                color: #fff;
                background-color: darken($wpbs_red, 10%);
                box-shadow: none;
                outline: 2px solid $wpbs_red;
            }
        }
    }

    &.wpbs-disabled-button {
        background-color: #ffffff;
        color: rgba($wpbs_blue, 0.5);
        border-color: rgba($wpbs_blue, 0.5);
        pointer-events: none;
    }
}

.wpbs-secondary-button {
    text-decoration: none;
    font-weight: 500;
    color: $wpbs_blue;
    font-size: 13px;
    line-height: 16px;
    border: 1px solid $wpbs_blue;
    background-color: #fff;
    display: inline-block;
    padding: 9px 12px;
    border-radius: 5px;
    transition-property: background-color;
    transition-duration: .1s;
    transition-timing-function: ease-in-out;

    &:last-child {
        margin-bottom: 0;
    }

    @include tablet_landscape_min {
        &:hover {
            background-color: rgba($wpbs_blue, 0.07);
            color: $wpbs_blue;
            cursor: pointer;
        }

        &:active {
            color: $wpbs_blue;
            background-color: rgba($wpbs_blue, 0.07);
        }

        &:focus {
            color: $wpbs_blue;
            background-color: rgba($wpbs_blue, 0.07);
            box-shadow: none;
            outline: 2px solid $wpbs_blue;
        }
    }

    @include tablet_landscape {
        &:active {
            color: $wpbs_blue;
            background-color: rgba($wpbs_blue, 0.07);
        }

        &:focus {
            color: $wpbs_blue;
            background-color: rgba($wpbs_blue, 0.07);
            box-shadow: none;
            outline: 2px solid $wpbs_blue;
        }
    }


    &.wpbs-remove-button {
        color: $wpbs_red;
        border-color: $wpbs_red;

        i {
            position: relative;
            top: 1px;
            font-size: 14px;
            display: inline-block;
        }

        @include tablet_landscape_min {
            &:hover {
                background-color: rgba($wpbs_red, 0.07);
                color: $wpbs_red;
                cursor: pointer;
            }

            &:active {
                color: $wpbs_red;
                background-color: rgba($wpbs_red, 0.07);
            }

            &:focus {
                color: $wpbs_red;
                background-color: rgba($wpbs_red, 0.07);
                box-shadow: none;
                outline: 2px solid $wpbs_red;
            }
        }

        @include tablet_landscape {
            &:active {
                color: $wpbs_red;
                background-color: rgba($wpbs_red, 0.07);
            }

            &:focus {
                color: $wpbs_red;
                background-color: rgba($wpbs_red, 0.07);
                box-shadow: none;
                outline: 2px solid $wpbs_red;
            }
        }
    }

    &.disabled {
        border-color: $wpbs_dark_border_color;
        background: #fff;
        color: $wpbs_light_text_color;
        pointer-events: none;
        outline: none;
    }

    .dashicons {
        width: auto;
        height: auto;
        line-height: inherit;
        vertical-align: middle;
        position: relative;
        top: -1px;
        margin-left: -4px;
        margin-top: -3px;
        margin-bottom: -3px;
    }
}


.wpbs-link-button {
    font-weight: normal;
    color: $wpbs_blue;
    font-size: 14px;
    line-height: 130%;
    outline: none !important;
    border: none !important;
    margin: 8px 0 0 0;
    display: inline-block;
    text-decoration: none;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }

    @include tablet_landscape_min {
        &:hover {
            color: darken($wpbs_blue, 10%);
        }

        &:active {
            outline: none !important;
            color: darken($wpbs_blue, 10%);
            border: none !important;
        }

        &:focus {
            outline: none !important;
            color: darken($wpbs_blue, 10%);
            border: none !important;
        }
    }

    @include tablet_landscape {
        &:active {
            outline: none !important;
            color: darken($wpbs_blue, 10%);
            border: none !important;
        }

        &:focus {
            outline: none !important;
            color: darken($wpbs_blue, 10%);
            border: none !important;
        }
    }

    i {
        font-size: 16px;
        display: inline-block;
        margin-right: 1px;
        position: relative;
        top: 2px;

        &.wpbs-icon-angle-down {
            font-size: 13px;
            display: inline-block;
            vertical-align: middle;
            margin-left: 1px;
            top: auto;
        }
    }

    &.wpbs-form-translations-toggle {
        &:focus {
            outline: none;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        &.open i {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
            display: inline-block;
        }
    }
}




// Sidebar Nav
.wpbs-sidebar-nav {
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: block;

        li {
            padding: 0;
            margin: 0;
            display: block;

            &:before {
                display: none;
            }

            a {
                font-size: 13px;
                line-height: 16px;
                font-weight: 500;
                display: block;
                background-color: transparent;
                border: none;
                text-decoration: none;
                border-bottom: 1px solid $wpbs_border_color;
                padding: 12px 0;
                color: $wpbs_text_color;

                @include tablet_landscape_min {
                    &:hover {
                        background-color: transparent;
                        color: $wpbs_blue;
                        border-color: $wpbs_border_color;
                    }
                }

                &.wpbs-nav-tab-active {
                    background-color: transparent;
                    color: $wpbs_blue;
                    border-color: $wpbs_border_color;
                }
            }
        }
    }
}




// Notifications
.wpbs-notifications {
    padding: 0 20px 20px 20px;

    @include phone {
        padding: 0 16px 16px 16px;
    }

    h1:empty {
        display: none;
    }

    >div:first-of-type {
        margin-top: 20px !important;
    }

    >div:last-of-type {
        margin-bottom: 0 !important;
    }

    >div+div {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }
}




// Tabs Nav
.wpbs-tabs-nav {
    max-width: 100%;
    position: relative;

    &.wpbs-has-scrollbar {
        .wpbs-tabs-menu {
            overflow-x: auto;
        }

        @at-root #wpbs-booking-details-modal-inner & {
            &:after {
                border-radius: 0px !important;
            }
        }

        &:after {
            content: "";
            position: absolute;
            right: 0px;
            top: 0;
            width: 150px;
            height: calc(100% - 1px);
            z-index: 1;
            background: rgb(255, 255, 255);
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
            border-top-right-radius: 9px;
            @include transition;
            pointer-events: none;
        }

        &.wpbs-scrolled-to-end {
            &:after {
                opacity: 0;
            }
        }
    }

    .wpbs-tabs-menu {
        background-color: $wpbs_lighter_bg;

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            border-bottom: 1px solid $wpbs_border_color;
            white-space: nowrap;
            height: 49px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            @include desktop_small {
                height: 45px;
            }

            li {
                padding: 0;
                margin: 0;

                a {
                    display: inline-block;
                    font-size: 13px;
                    line-height: 16px;
                    font-weight: 500;
                    text-decoration: none;
                    padding: 16px 20px;
                    background-color: $wpbs_lighter_bg;
                    border: 1px solid $wpbs_border_color !important;
                    margin: -1px;
                    color: $wpbs_text_color;
                    outline: none !important;
                    box-shadow: none !important;
                    position: relative;
                    height: 50px;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;

                    @include desktop_small {
                        padding: 14px 14px;
                        height: 46px;
                    }

                    .wpbs-calendar-notes-count {
                        display: inline-block;
                        vertical-align: middle;
                        min-width: 18px;
                        height: 18px;
                        line-height: 1.6;
                        font-size: 11px;
                        text-align: center;
                        border-radius: 50%;
                        background-color: $wpbs_blue;
                        color: #ffffff;
                        font-weight: 500;
                        margin: -3px 0 -3px 4px;
                        padding: 0 5px;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                        position: relative;
                        top: -1px;
                    }

                    .dashicons {
                        font-size: 16px;
                        width: 16px;
                        height: 16px;
                        display: inline-block;
                        vertical-align: middle;
                        margin: -3px 0 -3px 5px;
                        position: relative;
                        top: -1px;
                        font-weight: normal;
                        -moz-transition: none !important;
                        -webkit-transition: none !important;
                        -o-transition: none !important;
                        transition: none !important;

                        @include desktop_small {
                            display: none;
                        }
                    }

                    @include tablet_landscape_min {
                        &:hover {
                            color: $wpbs_blue;
                        }
                    }

                    &.wpbs-nav-tab-active {
                        background-color: $wpbs_blue;
                        color: #ffffff;

                        .wpbs-calendar-notes-count {
                            background-color: #fff;
                            color: $wpbs_blue_text;
                        }

                        .dashicons {
                            color: #ffffff;
                        }
                    }

                    &:active {
                        background-color: #a3b5fd;
                        color: #ffffff;
                    }
                }
            }
        }
    }
}



// Level 3 Nav
.mobile-level-3-menu {
    position: relative;
    margin: -20px -20px 20px -20px;

    .wpbs-sub-tab-navigation {
        margin: 0;
    }

    &.wpbs-has-scrollbar {
        &:after {
            content: "";
            position: absolute;
            right: 0px;
            top: 0px;
            width: 150px;
            height: calc(100% - 1px);
            z-index: 1;
            background: rgb(255, 255, 255);
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
            @include transition;
            pointer-events: none;
        }

        &.wpbs-scrolled-to-end {
            &:after {
                opacity: 0;
            }
        }
    }
}

.wpbs-sub-tab-navigation {
    list-style: none;
    padding: 10px 0 0 0;
    margin: -20px -20px 20px -20px;
    display: flex;
    border-bottom: 1px solid $wpbs_border_color;
    background-color: $wpbs_light_bg;
    white-space: nowrap;
    overflow-x: auto;

    li {
        padding: 0 0 0 14px;
        margin: 0;

        &:last-child {
            padding-right: 14px;
        }

        a {
            display: inline-block;
            font-size: 13px;
            line-height: 16px;
            font-weight: 500;
            text-decoration: none;
            padding: 8px 6px 15px 6px;
            color: $wpbs_text_color;
            position: relative;

            &:focus {
                -webkit-box-shadow: none;
                box-shadow: none;
            }

            &:before {
                content: "";
                display: block;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 3px;
                background-color: transparent;
                -moz-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
                -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
                -o-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
                transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
            }

            @include tablet_landscape_min {
                &:hover {
                    &:before {
                        background-color: $wpbs_blue;
                    }
                }
            }

            &.current {
                &:before {
                    background-color: $wpbs_blue;
                }
            }

        }

        .wpbs-conditional-logic-dot {
            width: 6px;
            height: 6px;
            border-radius: 6px;
            display: none;
            background-color: $wpbs_green;
            margin-left: 5px;
            position: relative;
            top: -1px;
        }

        &.wpbs-conditional-logic-tab-active {
            .wpbs-conditional-logic-dot {
                display: inline-block;
            }
        }
    }
}



// Tabs
.wpbs-nav-tab:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.wpbs-tab {
    display: none;

    &.wpbs-tab-bookings_list {
        min-height: 260px;
    }

    .wpbs-tab-inner {
        max-width: 700px;
        width: 100%;
    }

    h2:first-child {
        margin-top: 0;
        margin-bottom: 32px;
    }

    &.wpbs-active {
        display: block;
    }
}






// Forms
.wpbs-form-field {
    margin-bottom: 24px;

    &.wpbs-small-margin {
        margin-bottom: 8px;
    }

    &:last-of-type:not(.wpbs-hide) {
        margin-bottom: 0;

        &+input[type="submit"],
        &+.wpbs-secondary-button {
            margin-top: 24px;
        }
    }

    .wpbs-label {
        font-weight: 500;
        margin-bottom: 6px;
        display: block;
    }

    &.wpbs-absolute-label {
        position: relative;

        .wpbs-label {
            position: absolute;
            left: 12px;
            top: 12px;
            z-index: 2;
            font-size: 13px;
            line-height: 13px;
            font-weight: 500;

            img {
                display: inline-block;
                vertical-align: middle;
                margin-right: 3px;
                position: relative;
                top: -1px;
            }
        }
    }

    .wpbs-label-description {
        font-size: 12px;
        color: $wpbs_light_text_color;
        margin-top: 6px;

        a {
            color: $wpbs_blue;

            @include tablet_landscape_min {
                &:hover {
                    text-decoration: none;
                    color: darken($wpbs_blue, 10%);
                }
            }
        }
    }

    .wp-picker-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        &.wp-picker-active {
            .wp-picker-input-wrap {
                display: flex;
                flex-wrap: wrap;
                margin-top: 6px;
                margin-right: 6px;

                label,
                input {
                    flex: 0 1 auto;
                    width: auto;
                }

                label {
                    margin-right: 6px;
                }

                .wp-picker-clear {
                    -moz-transition: all 0.1s ease-in-out;
                    -webkit-transition: all 0.1s ease-in-out;
                    -o-transition: all 0.1s ease-in-out;
                    transition: all 0.1s ease-in-out;
                    background-color: $wpbs_light_bg;
                    color: $wpbs_text_color;
                    border: 1px solid $wpbs_dark_border_color;

                    @include tablet_landscape_min {
                        &:hover {
                            background-color: $wpbs_body_bg;
                        }
                    }
                }
            }
        }

        .iris-picker {
            border: 1px solid $wpbs_dark_border_color;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            border-radius: 6px;
        }

        .button:not(.wp-picker-clear) {
            flex-basis: 100%;
            width: 100%;
            margin: 0;
            border: 1px solid $wpbs_dark_border_color;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            border-radius: 6px;
            height: 36px;
            padding-left: 36px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;

            &:hover {
                @include input_hover;
            }

            &:focus {
                @include input_focus;
            }

            .wp-color-result-text {
                background: #fff;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                height: 100%;
                line-height: 34px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                font-size: 12px;
                border-left: 1px solid $wpbs_dark_border_color;
            }
        }
    }


    .wpbs-input {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        &.wpbs-input-inline-inputs {
            justify-content: flex-start;

            >div+div {
                margin-left: 10px;
            }
        }

        &.wpbs-input-two-col {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .wp-picker-container {
                max-width: calc(50% - 4px);
            }
        }

        &.wpbs-no-flex {
            display: block;
        }

        &.wpbs-has-columns {
            justify-content: initial;
            margin: -4px;

            &.wpbs-discount-validity-wrapper,
            &.wpbs-discount-value-field-inner {
                margin: 0;
            }

            .wpbs-half {
                flex-basis: 50%;
                max-width: 50%;
                margin: 0;
                padding: 4px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;

                @include phone {
                    &.wpbs-full-mobile {
                        max-width: 100%;
                        flex-basis: 100%;
                    }
                }

                label {
                    display: block;
                    font-size: 13px;
                    padding-bottom: 3px;
                    color: $wpbs_light_text_color;
                }
            }

            .wpbs-full {
                padding: 4px;
            }

            .wpbs-third {
                flex-basis: calc(100% / 3);
                max-width: calc(100% / 3);
                margin: 0;
                padding: 4px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;

                @include phone {
                    flex-basis: 50%;
                    max-width: 50%;
                }

                label {
                    display: block;
                    font-size: 13px;
                    padding-bottom: 3px;
                    color: $wpbs_light_text_color;
                }
            }

            .wpbs-br-field-inner-week-days {
                flex-basis: calc(100% / 7);
                max-width: calc(100% / 7);
                margin: 0;
                padding: 4px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;

                .wpbs-show-on-phone {
                    text-align: center;
                }

                label {
                    display: block;
                    font-size: 13px;
                    padding-bottom: 3px;
                    color: $wpbs_light_text_color;
                }
            }
        }

        label {
            flex-basis: 100%;
        }

        input:not(.ed_button),
        select:not(.ui-datepicker-month),
        textarea:not(.wp-editor-area) {
            flex: 1;
            width: 100%;
            max-width: 100%;
            border: 1px solid $wpbs_dark_border_color;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            border-radius: 6px;
            height: 36px;
            line-height: 36px;
            min-height: 1px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;

            &+.wpbs-primary-button,
            &+.wpbs-secondary-button {
                margin-left: 8px;
            }

            &:hover {
                @include input_hover;
            }

            &:focus {
                @include input_focus;
            }

            &.wpbs-small-input {
                max-width: 110px;
                vertical-align: text-top;
            }

        }

        input {
            padding: 0 12px;

            &[type="number"] {
                padding-right: 0;
            }

            &.hasDatepicker {
                background-color: #fff !important;
            }
        }

        textarea {
            padding: 8px 12px;
            min-height: 90px !important;
            line-height: 130% !important;
        }

        select {
            padding: 0 26px 0 12px;
            line-height: 34px !important;
        }

        .wpbs-wp-editor-ajax {
            width: 100%;
        }

        .wpbs-input-wrapper {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
            border: 1px solid $wpbs_dark_border_color;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            border-radius: 6px;
            overflow: hidden;

            &:hover {
                @include input_hover;
            }

            &:focus-within {
                @include input_focus;
            }

            input,
            select,
            textarea {
                flex: 1;
                width: auto !important;
                box-shadow: none !important;
                border: none !important;
                border-radius: 0px !important;
                min-width: 1px !important;
            }

            .wpbs-input-symbol {
                display: inline-block;
                background-color: $wpbs_light_bg;
                height: 100%;
                width: 36px;
                width: auto;
                text-align: center;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                position: relative;
                padding: 0 12px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                font-size: 14px;
                line-height: 130%;

                @include phone {
                    font-size: 11px;
                    padding: 0 8px;
                }

                a {
                    font-weight: normal;
                    color: $wpbs_blue;
                    text-decoration: none;
                    width: 100%;
                    height: 100%;
                    display: block;
                    outline: none;
                    box-shadow: none;

                    @include tablet_landscape_min {
                        &:hover {
                            color: darken($wpbs_blue, 10%);
                        }
                    }
                }

                &.wpbs-input-symbol-left {
                    border-right: 1px solid $wpbs_dark_border_color;
                }

                &.wpbs-input-symbol-right {
                    border-left: 1px solid $wpbs_dark_border_color;
                }

                span {
                    color: rgba($wpbs_text_color, 0.65);
                    font-weight: 500;
                    display: block;
                }

                &.wpbs-flag-symbol,
                &.wpbs-currency-symbol {
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    padding-left: 6px;
                    padding-right: 6px;

                    span {
                        color: $wpbs_text_color;
                        font-weight: 500;
                        font-size: 13px;
                        line-height: 13px;
                        min-width: 42px;
                    }

                    img {
                        display: inline-block;
                        width: 16px;
                        height: auto;
                        margin-right: 3px;
                    }
                }

                &.wpbs-currency-symbol {
                    span {
                        min-width: 53px;
                        ;
                    }
                }

            }
        }

        .wp-editor-wrap {
            flex-basis: 100%;
            max-width: 100%;
            border: 1px solid $wpbs_dark_border_color;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            border-radius: 6px;
            overflow: hidden;

            .wp-editor-tools {
                background-color: $wpbs_lighter_bg;

                .wp-editor-tabs {
                    display: flex;

                    button {
                        display: inline-block;
                        font-size: 13px;
                        line-height: 16px;
                        font-weight: 500;
                        text-decoration: none;
                        padding: 8px 12px;
                        background-color: $wpbs_lighter_bg;
                        border: 1px solid $wpbs_dark_border_color;
                        border-top: none;
                        border-bottom-color: transparent;
                        margin: 0 -1px -1px -1px;
                        color: #202327;
                        position: relative;
                        top: auto;
                    }
                }
            }

            &.tmce-active {
                .wp-editor-tools {
                    .wp-editor-tabs {

                        button.switch-tmce {
                            background-color: $wpbs_light_bg;
                        }

                        button.switch-html {
                            border-bottom-color: $wpbs_dark_border_color;
                        }
                    }
                }
            }

            &.html-active {
                .wp-editor-tools {
                    .wp-editor-tabs {

                        button.switch-tmce {
                            border-bottom-color: $wpbs_dark_border_color;
                        }

                        button.switch-html {
                            background-color: $wpbs_light_bg;
                        }
                    }
                }
            }

            .wp-editor-container {
                border: none;
                border-top: 1px solid $wpbs_dark_border_color;
                box-shadow: none;

                .mce-toolbar-grp {
                    border: none;
                    background-color: $wpbs_light_bg;
                }
            }

            .quicktags-toolbar {
                border-color: $wpbs_dark_border_color;
                background-color: $wpbs_light_bg;

                @include phone {
                    input[type="button"] {
                        padding: 0 8px;
                        min-height: 1px;
                        line-height: 24px;
                    }
                }

                input {
                    width: auto;
                }
            }
        }

        .wpbs-media-upload-preview-wrap {
            flex: 1;
            width: 155px;
            max-width: 155px;
            border: 1px solid $wpbs_dark_border_color;
            background-color: #fff;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            border-radius: 6px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            height: 116px;
            margin-bottom: 8px;
            display: block;
            position: relative;
            padding: 16px;

            span {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                display: none;
                font-weight: 900;
                text-transform: uppercase;
                font-size: 18px;
                color: $wpbs_border_color;
                white-space: nowrap;
            }

            &.no-image {
                span {
                    display: block;
                }
            }

            img {
                position: absolute;
                max-width: calc(100% - 16px);
                max-height: calc(100% - 16px);
                width: auto;
                height: auto;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            &:hover {
                @include input_hover;
            }

            &:focus {
                @include input_focus;
            }
        }


        .wpbs-media-upload-url {
            display: none;
        }

        .wpbs-media-upload-preview[src=""] {
            display: none;
        }

        .wpbs-media-upload-preview[src=""]+.wpbs-media-upload-remove {
            display: none;
        }


        .wpbs-repeater-field {
            &+.wpbs-repeater-field {
                margin-top: 16px;

                &.wpbs-small-margin {
                    margin-top: 8px;
                }
            }
        }

        .wpbs-calendar-categories {
            flex-basis: 100%;
        }

        .wpbs-row-has-delete {
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .wpbs-row-inner {
                flex: 1;
                margin-right: 8px;
            }

            .wpbs-delete-button {
                flex: 0 1 auto;
                background-color: $wpbs_red;
                color: #ffffff;
                text-decoration: none;
            }
        }
    }


    .wpbs-input-checkbox {
        position: relative;

        input {
            width: 0 !important;
            height: 0 !important;
            position: absolute !important;
            left: 0;
            top: 0;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none;

            &:checked+label {
                &:before {
                    color: $wpbs_blue;
                }
            }
        }

        label {
            position: relative;
            line-height: 24px;
            text-align: center;
            padding-left: 32px;

            &:before {
                content: "\f147";
                display: block;
                width: 24px;
                height: 24px;
                border: 1px solid $wpbs_dark_border_color;
                background-color: #fff;
                border-radius: 6px;
                box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
                font-family: 'dashicons';
                font-size: 22px;
                color: transparent;
                cursor: pointer;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
                text-align: left;
            }

            @include tablet_landscape_min {
                &:hover {
                    &:before {
                        @include input_hover;
                    }
                }

                &:focus {
                    &:before {
                        @include input_focus;
                    }
                }
            }
        }
    }


    .wpbs-input-radio {
        position: relative;

        input {
            width: 0 !important;
            height: 0 !important;
            position: absolute !important;
            left: 0;
            top: 0;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none;

            &:checked+label {
                &:after {
                    opacity: 1;
                }
            }
        }

        label {
            position: relative;
            line-height: 24px;
            text-align: center;
            padding-left: 32px;

            &:before {
                content: "";
                display: block;
                width: 24px;
                height: 24px;
                border: 1px solid $wpbs_dark_border_color;
                background-color: #fff;
                border-radius: 50%;
                box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
                font-family: 'dashicons';
                font-size: 22px;
                color: transparent;
                cursor: pointer;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
                text-align: left;
            }

            &:after {
                content: "";
                display: block;
                width: 12px;
                height: 12px;
                background-color: $wpbs_blue;
                border-radius: 50%;
                box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
                cursor: pointer;
                position: absolute;
                left: 7px;
                top: 50%;
                transform: translate(0, -50%);
                opacity: 0;
                @include transition;
            }

            @include tablet_landscape_min {
                &:hover {
                    &:before {
                        @include input_hover;
                    }
                }

                &:focus {
                    &:before {
                        @include input_focus;
                    }
                }
            }
        }
    }


    .wpbs-form-translations {
        display: none;
        margin-top: 16px;
    }


    .wpbs-repeater-wrapper {
        &+a {
            margin-top: 16px;
            display: inline-block;
        }
    }

    .wpbs-pill-checkbox {
        max-width: 100%;
        width: 100%;
        position: relative;

        &+.wpbs-pill-checkbox {
            margin-top: 8px;
        }

        input {
            position: absolute;
            width: 20px;
            height: 20px;
            max-width: 20px;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            opacity: 0;

            &:checked {
                &+label {

                    // background-color: rgba($wpbs_blue, 0.75);
                    // color: #ffffff;
                    &:after {
                        background-color: $wpbs_blue;
                    }
                }
            }
        }

        &.wpbs-pill-no-image {
            label {
                padding: 0 0 0 10px;
            }
        }

        label {
            width: 100%;
            max-width: 100%;
            border: 1px solid $wpbs_dark_border_color;
            background-color: #fff;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            border-radius: 6px;
            height: 36px;
            line-height: 34px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            position: relative;
            padding: 0 0 0 44px;
            display: block;
            cursor: pointer;
            overflow: hidden;

            &:before {
                content: "";
                display: block;
                position: absolute;
                right: 8px;
                top: 50%;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                border: 1px solid $wpbs_dark_border_color;
                transform: translate(0, -50%);
            }

            &:after {
                content: "";
                display: block;
                position: absolute;
                right: 11px;
                top: 50%;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: transparent;
                transform: translate(0, -50%);
            }

            @include tablet_landscape_min {
                &:hover {
                    background-color: $wpbs_lighter_bg;
                }
            }

            .flag {
                position: absolute;
                left: 0;
                top: 0;
                width: 36px;
                height: 100%;
                border-right: 1px solid $wpbs_dark_border_color;
                background-color: $wpbs_light_bg;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;

                img {
                    display: block;
                    max-width: 100%;
                    height: auto;
                    margin: 0;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    &.wpbs-bm-tablenav-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        @media screen and (max-width: 1070px) {
            display: block;
        }

        .wpbs-bm-tablenav-filters-wrap {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-right: 6px;
            margin-bottom: -10px;

            >* {
                margin-bottom: 10px;
            }

            >*+* {
                margin-right: 4px;
            }
        }

        >*+* {
            margin-right: 4px;
        }

        .wpbs-input {
            input+input {
                margin-left: 4px;
            }

            &+input {
                margin-left: 4px;
            }
        }
    }
}


.wpbs-checkbox-switch {
    display: inline-block !important;
    float: none;
    height: 24px;
    position: relative;
    width: 42px !important;
    max-width: 42px !important;

    &:hover {
        opacity: 0.9;
    }

    input {
        display: none !important;

        &:checked {
            &+.wpbs-checkbox-slider {
                background-color: $wpbs_blue;

                &:before {
                    -webkit-transform: translateX(18px);
                    -ms-transform: translateX(18px);
                    transform: translateX(18px);
                }
            }
        }
    }

    .wpbs-checkbox-slider {
        background-color: #ccc;
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        -webkit-transition: .4s;
        -o-transition: .4s;
        transition: .4s;
        border-radius: 38px;

        &:before {
            background-color: #fff;
            content: "";
            width: 18px;
            height: 18px;
            left: 3px;
            bottom: 3px;
            position: absolute;
            -webkit-transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), width 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -o-transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), width 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), width 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border-radius: 50%;
        }

    }
}

.wpbs-form-fields-indent {
    border-left: 3px solid $wpbs_border_color;
    padding: 10px 0 10px 20px;
    margin-bottom: 24px;

    padding: 10px 0px 10px 10px;

    &.wpbs-form-fields-repeater {
        background-color: $wpbs_light_bg;
        padding: 16px;
        box-shadow: 1px 1px 2px rgba(32, 35, 39, .2);
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;

        @include phone {
            padding: 14px 10px;
        }
    }

    >h2,
    >h3 {
        &.hndle:first-child {
            margin-top: 0;
            position: relative;
            margin-bottom: 32px;

            &:before {
                content: "";
                display: block;
                position: absolute;
                left: -16px;
                top: -16px;
                width: calc(100% + 32px);
                height: calc(100% + 32px);
                background-color: $wpbs_light_bg;
                border-bottom: 1px solid $wpbs_border_color;
                border-top-right-radius: 6px;

                @include phone {
                    left: -10px;
                    right: -10px;
                }
            }

            span {
                position: relative;
                z-index: 2;
            }
        }
    }
}




// Chosen
.wpbs-chosen-wrapper {
    .chosen-container {
        width: 100% !important;

        &.chosen-with-drop {
            margin-bottom: 129px;
        }

        &.chosen-container-active {
            .chosen-choices {
                @include input_focus;
            }
        }

        .chosen-choices {
            flex: 1;
            width: 100%;
            max-width: 100%;
            border: 1px solid $wpbs_dark_border_color;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            border-radius: 6px;
            min-height: 36px !important;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 4px 26px 0px 4px;
            background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
            background-size: 16px 16px;

            &:hover {
                @include input_hover;
            }


            li.search-field {
                position: relative;
                top: -1px;
                left: 10px;

                input {
                    min-height: 0 !important;
                    height: 28px !important;
                }
            }

            .search-choice {
                background: $wpbs_light_bg !important;
                border: 1px solid $wpbs_dark_border_color !important;
                color: #202327 !important;
                box-shadow: none !important;
                border-radius: 6px !important;
                font-size: 12px;
                line-height: 14px !important;
                margin: 0px 4px 4px 0 !important;
                padding: 4px 34px 6px 8px !important;

                .search-choice-close {
                    top: 50% !important;
                    right: 0 !important;
                    height: 100% !important;
                    width: 26px !important;
                    transition: none;
                    background: none !important;
                    border-left: 1px solid $wpbs_dark_border_color;
                    transform: translate(0, -50%);

                    &:after {
                        content: "\f335";
                        display: block;
                        font-family: 'dashicons';
                        font-size: 16px;
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                        color: #202327;
                        text-align: center;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }

                    &:hover {
                        &:after {
                            color: $wpbs_red;
                        }
                    }

                }
            }

        }

        .chosen-drop {
            padding-top: 5px;
            top: calc(100% - 5px) !important;
            border: 1px solid $wpbs_dark_border_color;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            border-radius: 6px;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-top: none;

            &:after {
                width: 100%;
                height: 1px;
                background-color: $wpbs_dark_border_color;
                position: absolute;
                top: 4px;
                left: 0;
                content: "";
            }

            .chosen-results {
                max-height: 125px;

                li.highlighted {
                    background: $wpbs_blue !important;
                }
            }
        }
    }
}

// Notices

.wpbs-notifications {
    @include phone {
        .notice-dismiss {
            padding: 6px;
        }
    }
}

.wpbs-page-notice,
.wpbs-notifications>div:not(.notice),
.wpbs-notifications .updated.notice,
.wpbs-notifications .error.notice {
    background: #fff;
    border: 1px solid rgb(181 198 255);
    border-radius: 6px;
    margin: 0 0 10px;
    padding: 10px 12px 10px 50px;
    position: relative;
    background-color: rgb(239 242 255);
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    @include phone {
        padding-right: 30px !important;
    }

    @at-root .wpbs-tab & {
        margin-bottom: 24px;

        &+.wpbs-page-notice,
        &+.wpbs-notifications>div:not(.notice),
        &+.wpbs-notifications .updated.notice,
        &+.wpbs-notifications .error.notice {
            margin-top: -14px;
        }
    }

    &:last-of-type {
        margin-bottom: 0;

        &+.wpbs-primary-button,
        &+.wpbs-secondary-button {
            margin-top: 24px;
        }
    }

    p {
        font-size: 13px;
        line-height: 130%;
        padding: 2px 0;
        margin: 0;

        &+.wpbs-form-field {
            margin-top: 4px;
        }
    }

    &:before {
        font-family: "dashicons";
        content: "\f348";
        position: absolute;
        left: 12px;
        top: 50%;
        text-align: center;
        font-size: 17px;
        margin-top: -13px;
        width: 26px;
        height: 26px;
        border-radius: 6px;
        line-height: 26px;
        color: #fff;
        background-color: $wpbs_blue;
    }

    &.notice-error,
    &.error,
    &.error.notice {
        border-color: rgb(232 161 161);
        background-color: rgb(250 234 234);

        &:before {
            content: "\f534";
            background-color: $wpbs_red;
        }
    }

    &.updated.notice,
    &.notice-updated {
        border-color: rgb(160 212 151);
        background-color: rgb(234 246 232);

        &:before {
            content: "\f12a";
            background-color: $wpbs_green;
        }
    }

    &.notice-warning {
        border-color: rgb(236 213 137);
        background-color: rgb(251 246 229);

        &:before {
            content: "\f534";
            background-color: $wpbs_yellow;
        }
    }

    a {
        font-weight: normal;
        color: $wpbs_blue;
        font-size: 14px;
        line-height: 130%;
        outline: none !important;
        border: none !important;
        display: inline-block;
        text-decoration: underline;

        @include tablet_landscape_min {
            &:hover {
                text-decoration: none;
                color: darken($wpbs_blue, 10%);
            }

            &:active {
                outline: none !important;
                color: darken($wpbs_blue, 10%);
                border: none !important;
            }

            &:focus {
                outline: none !important;
                color: darken($wpbs_blue, 10%);
                border: none !important;
            }
        }
    }

}

// Hide Show
.wpbs-hidden,
.wpbs-hide {
    display: none;
}

.wpbs-divider {
    height: 1px;
    margin: 32px 0;
    background-color: $wpbs_border_color;
}

.wpbs-hide-on-tablet-landscape {
    @include tablet_landscape {
        display: none !important;
    }
}

.wpbs-show-on-tablet-landscape {
    @include tablet_landscape_min {
        display: none !important;
    }
}

.wpbs-hide-on-tablet {
    @include tablet {
        display: none !important;
    }
}

.wpbs-show-on-tablet {
    @include tablet_min {
        display: none !important;
    }
}

.wpbs-hide-on-phone {
    @include phone {
        display: none !important;
    }
}

.wpbs-show-on-phone {
    @include phone_min {
        display: none !important;
    }
}



// Box Header
.wpbs-box-header {
    border-bottom: 1px solid $wpbs_border_color;
    background: $wpbs_lighter_bg;
    padding: 16px 20px;

    @include phone {
        padding: 16px;
    }

    h2 {
        margin: 0 !important;
    }

    h3 {
        margin: 0;
    }

    &.wpbs-has-buttons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        .wpbs-buttons {
            margin-top: -3px;
            margin-bottom: -3px;
        }

        .wpbs-secondary-button,
        .wpbs-primary-button {
            margin: 0;
        }
    }
}


// Box Toolbar
.wpbs-box-toolbar {
    border: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background-color: transparent;

    @include phone {
        display: block;

        .wpbs-form-field {
            flex: 1;
        }

        .subsubsub {
            margin-bottom: 8px;
        }
    }

    ul {
        float: none;
        padding: 0;
        margin: 0;
        list-style: none;
        color: $wpbs_text_color;
        display: flex;

        li {
            padding: 0;
            float: none;

            &:last-child {
                margin-right: 0;
            }

            a {
                text-decoration: none;
                color: $wpbs_blue;
                padding: 0;

                @include tablet_landscape_min {
                    &:hover {
                        color: darken($wpbs_blue, 10%);
                    }
                }
            }
        }

        .divider {
            display: inline-block;
            vertical-align: middle;
            margin: auto 8px;
            padding: 0;
            position: relative;
            top: -1px;
        }
    }

    .search-box {
        display: flex;
        align-items: center;
        padding-top: 1px;

        input,
        button {
            margin: 0 !important;
        }

        .wpbs-form-field {
            margin-right: 8px;
        }
    }
}

.wpbs-spaced-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.wpbs-add-icon {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-color: $wpbs_blue;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #ffffff;
    margin-right: 16px;

    @include phone {
        width: 34px;
        height: 34px;
        margin-right: 8px;
    }

    span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 22px;
        line-height: 22px;
        padding: 0;
        margin: 0;
        width: auto;
        height: auto;

        &.dashicons-plus {
            left: auto;
            right: -4px;
            top: -4px;
            transform: none;
            font-size: 12px;
            line-height: 18px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: darken($wpbs_blue, 10%);
        }
    }
}


// Box Footer
.wpbs-box-content .wpbs-box-footer-wrapper {
    margin-top: 32px;
    margin-bottom: -32px;
    padding-left: 0;
    padding-right: 0;

    @include phone {
        margin-bottom: -16px;
    }
}

.wpbs-box-footer-wrapper {
    position: relative;
    padding: 16px 20px;
    margin-top: 0;

    @include phone {
        padding-left: 16px;
        padding-right: 16px;
    }

    .wpbs-box-footer-bookings {
        display: flex;
        justify-content: space-between;
        align-items: center;

        @include phone {
            display: block;

            .wpbs-buttons {
                margin-bottom: 10px;
            }

            .wpbs-bookings-pagination {
                text-align: center;
            }
        }
    }

    &:before {
        content: "";
        display: block;
        position: absolute;
        left: -20px;
        top: 0;
        width: 100vw;
        height: 1px;
        background-color: $wpbs_border_color;
        z-index: 2;
    }

    &:after {
        content: "";
        display: block;
        position: absolute;
        left: -20px;
        top: 0;
        width: 100vw;
        height: 100%;
        background-color: $wpbs_light_bg;
        z-index: 1;
    }

    .wpbs-box-footer {
        position: relative;
        z-index: 2;
    }
}




// Box Table
.wpbs-box-table-wrapper {
    .tablenav.top {
        padding: 0;
        margin: 0;
        height: auto;

        .tablenav-pages {
            display: none;
        }

        .wpbs-bm-tablenav-filters {
            margin-bottom: 20px;

            .wpbs-bm-export-button {
                margin: auto 0 auto auto !important;
            }
        }
    }

    .tablenav-hide-export {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .wpbs-has-scrollbar {
        position: relative;

        &:after {
            content: "";
            position: absolute;
            right: 1px;
            top: 1px;
            width: calc(150px - 1px);
            height: calc(100% - 2px);
            z-index: 1;
            background: rgb(255, 255, 255);
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            @include transition;
            pointer-events: none;
        }

        &.wpbs-scrolled-to-end {
            &:after {
                opacity: 0;
            }
        }
    }

    .wpbs-table-wrap {
        padding: 0;
        margin: 0;
        background-color: #ffffff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid $wpbs_border_color;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
        flex-basis: 100%;

        @include tablet_landscape {
            overflow-x: auto;
            width: 100%;
        }

        th,
        td {
            &:first-child {
                padding-left: 20px;
                margin-left: 0;

                @include phone {
                    padding-left: 10px;
                }

                a {
                    display: inline-block;
                    padding-left: 0;
                }
            }
        }

        table {
            padding: 0;
            margin: 0;
            border: none;
            color: $wpbs_text_color;

            &.wpbs_emails {
                .column-status {
                    width: 60px;
                }

                .column-id {
                    width: 60px;
                }
            }

            .wpbs-table-row-inactive {
                td:not(.column-status) {
                    >span {
                        opacity: 0.6;
                    }
                }
            }

            &.wpbs_legend_items {
                tr {
                    th {
                        height: 36px;
                    }
                }

                select,
                input {
                    max-width: 200px;

                    @include phone {
                        max-width: 100%;
                    }
                }

                /***** Media Queries *****/
                @media screen and (max-width: 782px) {

                    .row-actions {
                        margin-left: -8px;
                    }

                    .auto_pending {
                        padding-bottom: 12px !important;

                        &:before {
                            top: 10px !important;
                        }
                    }
                }
            }

            a {
                color: $wpbs_blue_text;
                -moz-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
                -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
                -o-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
                transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

                @include tablet_landscape_min {
                    &:hover {
                        color: darken($wpbs_blue_text, 10%);
                    }
                }
            }

            .trash {
                a {
                    color: $wpbs_red;

                    @include tablet_landscape_min {
                        &:hover {
                            color: darken($wpbs_red, 10%);
                        }
                    }
                }
            }

            thead,
            tfoot {
                padding: 0;
                margin: 0;
                border: none;

                tr {
                    th {
                        border: none;
                        border-bottom: 1px solid $wpbs_border_color;
                        background-color: $wpbs_lighter_bg;
                        font-weight: 500;
                        padding-top: 6px;
                        padding-bottom: 6px;

                        a {
                            color: $wpbs_text_color;


                            @include tablet_landscape_min {
                                &:hover {
                                    color: $wpbs_blue_text;
                                }
                            }
                        }
                    }
                }
            }

            tfoot {
                tr {
                    th {
                        border-top: 1px solid $wpbs_border_color;
                        border-bottom: none;
                    }
                }
            }

            tbody {
                padding: 0;
                margin: 0;
                border: none;

                tr {
                    td {
                        border: none;
                        border-bottom: 1px solid $wpbs_border_color;
                        background-color: #ffffff;
                        -moz-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
                        -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
                        -o-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
                        transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

                        @include tablet {
                            .row-actions {
                                margin-left: 0;
                                margin-right: 0;
                            }
                        }
                    }

                    @include tablet {
                        &.is-expanded {
                            td.column-primary {
                                border-bottom-color: transparent;
                            }
                        }
                    }

                    @include tablet_landscape_min {
                        &:hover {
                            td {
                                background-color: $wpbs_lighter_bg;
                            }
                        }
                    }
                }
            }

        }
    }
}


@media screen and (max-width: 782px) {
    .wp-list-table:not(.wpbs_bookings) tr:not(.inline-edit-row):not(.no-items) td.column-primary~td:not(.check-column) {
        padding: 3px 8px 3px calc(35% + 10px);
        border: none;

        @include phone {
            padding: 3px 8px 3px 35%;
        }

        &:last-child {
            border-bottom: 1px solid $wpbs_border_color;
        }

        &:before {
            left: 20px;

            @include phone {
                left: 10px;
            }
        }
    }

    .wp-list-table .toggle-row {
        top: 0;

        &:before {
            position: absolute;
            left: 50%;
            top: 50%;
            margin: 0;
            transform: translate(-50%, -50%);
        }
    }


    // Bookings Manager
    .wp-list-table.wpbs_bookings {
        table-layout: auto;
        min-width: 1700px;

        th.column-primary~th,
        thead tr th,
        .wpbs-box-table-wrapper .wpbs-table-wrap table tfoot tr th,
        tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) {
            display: table-cell !important;
            padding: 8px 10px !important;

            &:before {
                display: none !important;
            }

            &:first-child {
                padding-left: 20px !important;
            }
        }

        th a {
            padding: 0 !important;
        }


        .toggle-row {
            display: none !important;
        }


        .column-id {
            width: 50px !important;

            a {
                width: 50px !important;
            }
        }

        .column-calendar {
            width: 120px !important;
        }

        .column-status {
            width: 110px !important;
        }

        .column-view {
            width: 120px !important;
        }

        .column-stay_length {
            width: 80px !important;
        }

        .column-security_deposit {
            width: 103px !important;
        }

        .column-booking_start_date,
        .column-booking_end_date,
        .column-date_created {
            width: 145px !important;
        }

        .column-payment_status {
            width: 164px !important;
        }
    }
}





// Add New Calendar Page
.wpbs-wrap-add-calendar,
.wpbs-wrap-add-form {
    .wpbs-notifications {
        max-width: 680px;
        margin: 0 auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
    }
}




span.wpbs-list-table-id {
    background-color: #999;
    color: #fff;
    font-weight: bold;
    // padding: 8px 3px;
    // line-height: 14px;
    // border-radius: 3px;
    display: inline-block;
    // min-width: 24px;
    text-align: center;
    font-size: 13px;


    text-decoration: none;
    vertical-align: middle;
    line-height: 28px;
    margin-right: 4px;
    border-radius: 6px;
    padding: 1px 10px;
    color: #fff;
    font-weight: bold;
    color: #fff;
    @include transition;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


// Page Headings
.wpbs-heading-tag {
    font-size: 11px;
    margin-left: 12px;
    background: $wpbs_header_color;
    color: #fff;
    padding: 3px 11px;
    border-radius: 6px;
    vertical-align: middle;

    @include tablet_landscape {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    &+#titlediv {
        margin-left: 24px;
    }
}



// Form Dynamic Tags
.wpbs-dynamic-tags-wrapper {
    display: flex;
    justify-content: space-between;

    @include phone {
        flex-direction: column;
    }

    .wpbs-tab-inner {
        width: 100%;
        margin-right: 20px;

        @include phone {
            margin-right: 0;
        }
    }

    .wpbs-dynamic-tags {
        order: 2;
        z-index: 100;
        padding: 0 0 0 20px;
        border-left: 1px solid $wpbs_border_color;
        max-width: 490px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        @include tablet_landscape {
            max-width: 340px;
        }

        @include tablet {
            max-width: 300px;
        }

        @include phone {
            order: 2;
            max-width: 100%;
            padding-left: 0;
            border-left: none;
            border-top: 1px solid $wpbs_border_color;
            margin-top: 24px;
            padding-top: 24px;
        }

        .wpbs-email-tags {
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            h4 {
                flex-basis: 100%;
            }

            .wpbs-email-tag {
                position: relative;

                div {
                    border: 1px solid $wpbs_dark_border_color;
                    border-radius: 6px;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    margin: 0 4px 4px 0;
                    padding: 7px 6px;
                    background-color: #ffffff;
                    font-size: 13px;
                    line-height: 13px;
                    @include transition;
                    position: relative;
                    cursor: pointer;
                    font-family: "Courier New",
                        Courier,
                        monospace;

                    @include tablet_landscape_min {
                        &:hover {
                            background-color: $wpbs_light_bg;
                        }
                    }

                    @include phone {
                        font-size: 12px
                    }
                }


            }
        }
    }
}



.wpbs-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    background-color: $wpbs_blue;
    color: #ffffff;
    transform: translate(-50%, 0);
    font-size: 12px;
    line-height: 14px;
    padding: 4px 6px 5px 6px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -moz-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

    &.visible {
        opacity: 1;
        visibility: visible;
    }

    &:after {
        content: "";
        display: block;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 6px 6px 0 6px;
        border-color: $wpbs_blue transparent transparent transparent;
        transform: rotate(0deg);
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translate(-50%, 0);
    }
}


.wpbs-select-on-click.wpbs-small-print-tag {
    font-weight: 500;
    color: $wpbs_blue;
    position: relative;

    @include tablet_landscape_min {
        &:hover {
            -moz-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
            -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
            -o-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
            transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
            cursor: pointer;
            color: daken($wpbs_blue, 10%);
        }
    }
}




// Booking Restrictions Add-on
.wpbs-booking-restriction:first-child .wpbs-booking-restriction-remove {
    display: none;
}

.wpbs-booking-restriction:first-child .wpbs-settings-br-validation-type {
    display: none;
}

.wpbs-settings-br-date-range-type {
    display: none;
}

.wpbs-fixed-interval:first-child .wpbs-fixed-interval-remove {
    display: none;
}


.wpbs-weekday-checkboxes {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -4px;

    .wpbs-weekday-checkbox {
        padding: 0 4px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;

        input {
            width: 0;
            height: 0;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;

            &:checked+label {
                &:before {
                    color: $wpbs_blue;
                }
            }
        }

        label {
            position: relative;
            line-height: 24px;
            text-align: center;

            &:before {
                content: "\f147";
                display: block;
                width: 24px;
                height: 24px;
                border: 1px solid $wpbs_dark_border_color;
                background-color: #fff;
                border-radius: 6px;
                box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
                font-family: 'dashicons';
                font-size: 22px;
                color: transparent;
                cursor: pointer;
                text-align: left;
            }

            @include tablet_landscape_min {
                &:hover {
                    &:before {
                        @include input_hover;
                    }
                }

                &:focus {
                    &:before {
                        @include input_focus;
                    }
                }
            }
        }
    }
}



/******************************************************************************************/
/* Forms Builder
/******************************************************************************************/
.wpbs-wrap-edit-form {
    .wpbs-start-building {
        display: none;
        margin: 0 auto;
        max-width: 540px;
        text-align: center;
        font-size: 20px;
        color: $wpbs_lighter_text_color;
        margin-top: 50px;

        @include desktop {
            font-size: 16px;
        }

        @include phone {
            font-size: 14px;
            margin-top: 0;
            margin-bottom: 20px;
        }

        i {
            display: block;
            text-align: center;
            font-size: 100px;
            line-height: 100px;
            margin: 0 auto;
            width: auto;
            height: auto;
            color: $wpbs_lighter_text_color;
            margin-bottom: 20px;

            @include desktop {
                font-size: 80px;
                line-height: 80px;
                font-weight: normal;
            }

            @include phone {
                font-size: 60px;
                line-height: 60px;
                margin-bottom: 14px;
            }
        }
    }

    .wpbs-form-builder-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        justify-content: space-between;

        @include tablet_landscape {
            flex-direction: column;
        }

        h3.hndle {
            padding: 0;
            margin: 0 0 12px 0;
            font-size: 20px;
            line-height: 150%;
        }

        .wpbs-form-builder {
            flex: 1;
            margin-right: 20px;

            @include tablet_landscape {
                flex-basis: 100%;
                margin-right: 0;
                order: 2;
            }
        }

        .wpbs-form-builder-elements {
            float: none;
            max-width: 400px;
            border-left: 1px solid $wpbs_border_color;
            width: auto !important;
            padding: 0 0 0 20px;
            margin: 0 !important;

            @include desktop {
                max-width: 350px;
            }

            @include tablet_landscape {
                max-width: 100%;
                flex-basis: 100%;
                padding-left: 0;
                border: none;
            }

            @include tablet_landscape {
                .wpbs-js-add-form-element {
                    margin-bottom: 24px;
                }
            }
        }
    }

    #wpbs-form-builder {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    .form-field-placeholder {
        height: 55px;
        border: 3px dashed $wpbs_body_bg;
        flex-basis: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin-bottom: 12px;
    }

    .form-field {
        flex-basis: 100%;
        max-width: 100%;
        width: 100%;
        border: 1px solid $wpbs_dark_border_color;
        box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0 0 12px 0 !important;
        background-color: #fff;
        overflow: hidden;
        -moz-transition: background-color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transition: background-color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: background-color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: background-color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);


        .wpbs-sub-tab-navigation {
            border-top: 1px solid $wpbs_border_color;
        }

        &:last-child {
            margin-bottom: 0 !important;
        }

        &:hover {
            background-color: $wpbs_lighter_bg;
        }

        &.open {
            background-color: $wpbs_lighter_bg;
        }

        .form-field-header {
            cursor: pointer;
            padding: 8px 12px;
            line-height: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            @include phone {
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: flex-start;
            }

            p {
                margin: 0;
                line-height: 18px;
                font-weight: 600;

                @include phone {
                    flex-basis: 100%;
                }

                small {
                    display: block;
                    color: $wpbs_lighter_text_color;
                    text-transform: capitalize;
                }

                span.form-field-header-label span {
                    font-weight: normal;

                    span {
                        text-transform: capitalize;
                    }
                }
            }
        }

        &.form-field-type-html .form-field-header p span.form-field-header-label span {
            font-weight: 600;

            span {
                text-transform: uppercase;
            }
        }

        .form-field-header a {
            margin-left: 15px;
            display: block;
            float: left;
            outline: none;

            &:focus {
                -webkit-box-shadow: none;
                box-shadow: none;
            }
        }

        &.open .form-field-header {
            a.form-field-toggle i {
                -webkit-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                transform: rotate(180deg);
                display: inline-block;
            }
        }

        .form-field-header {
            @include phone {
                position: relative;
            }

            .form-field-header-buttons {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                order: 2;
                font-size: 16px;

                @include phone {
                    font-size: 14px;
                    margin-top: 6px;

                    .form-field-toggle {
                        position: absolute;
                        right: 12px;
                        top: 10px;
                        font-size: 16px;
                    }
                }

                span {
                    display: block;
                    opacity: 0;
                    @include transition;

                    @include phone {
                        opacity: 1;
                        margin-left: 0 !important;
                    }
                }

                a {
                    text-decoration: none;
                    color: #555555;
                    opacity: 0;
                    @include transition;

                    @include phone {
                        opacity: 1;
                    }

                    &.form-field-toggle {
                        opacity: 1;
                    }

                    &:hover {
                        color: $wpbs_blue;
                    }

                    &.form-field-remove {
                        color: $wpbs_red;

                        &:hover {
                            color: darken($wpbs_red, 10%);
                        }
                    }
                }

                .form-field-id {
                    font-size: 11px;
                    margin-left: 12px;
                    background: $wpbs_header_color;
                    color: #fff;
                    padding: 3px 11px;
                    border-radius: 6px;
                    vertical-align: middle;
                }
            }

            &:hover .form-field-header-buttons {

                a,
                span {
                    opacity: 1;
                }
            }

            p i {
                font-size: 16px;
                display: inline-block;
                display: inline-block;
                vertical-align: middle;
                position: relative;
                top: -1px;
                color: #555;
                min-width: 20px;
                margin-right: 3px;
                text-align: center;
            }

            &:after {
                content: "";
                display: block;
                clear: both;
            }
        }
    }

    .form-field-content {
        padding: 0 12px;
        display: none;

        .form-field-content-inner {
            padding-bottom: 20px;

            .wpbs-sub-tab-navigation {
                margin-top: 0;
            }

            @include tablet_landscape {
                .mobile-level-3-menu {
                    margin-top: 0;
                }
            }
        }

        .form-field-row {
            .form-field-option-placeholder {
                display: none;
            }

            .form-field-options {
                display: flex;
                width: 100%;

                .form-field-options-inner {
                    flex: 1;
                }
            }

            .form-field-options-inner-heading {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding-right: 46px;

                span {
                    max-width: calc(100% / 2 - 5px);
                    flex-basis: calc(100% / 2 - 5px);
                    display: block;
                    font-size: 13px;
                    padding-bottom: 3px;
                    color: $wpbs_light_text_color;
                }
            }

            .form-field-options-inner-fields {
                >div {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    position: relative;
                    padding-right: 46px;

                    input {
                        max-width: calc(100% / 2 - 5px);
                        flex-basis: calc(100% / 2 - 5px);
                        position: relative;
                        margin: 0;

                        * {
                            margin: 0 !important;
                        }
                    }

                    input:first-of-type:last-of-type {
                        max-width: 100%;
                        flex-basis: 100%;
                    }

                    .form-field-option-field-remove {
                        position: absolute;
                        right: 0;
                        top: 0;
                        color: #ffffff;
                    }

                    &+div {
                        margin-top: 8px;
                    }
                }
            }

            .form-field-add-option {
                margin-top: 12px;
            }

        }

        .form-field-row-type-conditional-logic-wrapper {
            .form-field-row-type-conditional-logic-action {
                width: 80px;
                float: left;

                select {
                    width: 80px;
                    float: left;
                }
            }

            .form-field-row-type-conditional-logic-type {
                width: 120px;
                float: left;

                select {
                    width: 120px;
                    float: left;
                }
            }

            span {
                display: block;
                float: left;
                line-height: 30px;
                margin: 0 6px;
            }
        }

        .form-field-row-type-conditional-logic-rules {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;

            &:last-of-type {
                margin-bottom: 0;
            }

            * {
                margin: 0 !important;
            }
        }

        .conditional-logic-rules {
            width: 100%;

            .conditional-logic-rule {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;
                position: relative;
                padding-right: 46px;

                .form-field-row {
                    max-width: calc(100% / 3 - 5px);
                    flex-basis: calc(100% / 3 - 5px);
                    position: relative;
                    margin: 0;

                    * {
                        margin: 0 !important;
                    }


                }

                .conditional-logic-remove-rule {
                    position: absolute;
                    right: 0;
                    top: 0;
                    color: #ffffff;
                }

                &+.conditional-logic-rule {
                    margin-top: 8px;
                }
            }

            .conditional-logic-add-rule {
                margin-top: 12px;
            }
        }

        .form-field-row-type-conditional-logic-disabled {
            display: none !important;
        }
    }
}

.conditional-logic-rules .conditional-logic-rule {
    a {
        display: inline-block;
        text-decoration: none;
        font-size: 12px;

        span {
            font-size: 18px;
            margin: 0 !important;
            height: auto;
        }

        &.conditional-logic-add-rule {
            display: none;
        }
    }

    &:last-child a.conditional-logic-add-rule {
        display: inline-block;
    }
}


body.wpbs-form-builder-elements-wrapper-visible {
    overflow: hidden;
}

.wpbs-wrap-edit-form {
    .wpbs-settings-field-show-translations {
        text-decoration: none;
        margin-top: 3px;
        display: inline-block;

        &:focus {
            outline: none;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        i {
            position: relative;
            top: 1px;
        }

        &.open i {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
            display: inline-block;
        }
    }

    .form-field-content {
        .form-field-accordion-open {
            text-decoration: none;
            display: inline-block;
            line-height: 26px;

            &:focus {
                outline: none;
                -webkit-box-shadow: none;
                box-shadow: none;
            }

            i {
                position: relative;
                top: 1px;
            }
        }

        .form-field-accordion.open .form-field-accordion-open i {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
            display: inline-block;
        }

        .form-field-accordion-inner {
            display: none;
            padding-top: 10px;
        }

        .form-field-tabs-navigation {
            display: flex;
            border-bottom: 1px solid $wpbs_border_color;
            margin: -20px -12px 20px -12px;
            background-color: $wpbs_lighter_bg;
            overflow: hidden;

            @include desktop {
                max-width: calc(100% + 24px);
                overflow: auto;
            }

            @include phone {
                margin-left: -12px;
                margin-right: -12px;
                max-width: calc(100% + 24px);
            }

            a {
                display: inline-block;
                text-decoration: none;
                @include transition;
                display: inline-block;
                text-decoration: none;
                font-weight: 500;
                color: $wpbs_text_color;
                font-size: 13px;
                line-height: 16px;
                display: inline-block;
                padding: 17px 12px 14px 12px;
                transition-property: background-color;
                transition-duration: .1s;
                transition-timing-function: ease-in-out;
                border-right: 1px solid $wpbs_border_color;
                border-bottom: 3px solid transparent;
                outline: none !important;
                box-shadow: none !important;

                @include desktop {
                    white-space: nowrap;
                }

                img {
                    margin-right: 5px;
                }

                @include tablet_landscape_min {
                    &:hover {
                        border-bottom-color: $wpbs_blue;
                    }
                }

                &.active {
                    border-bottom-color: $wpbs_blue;
                }
            }
        }
    }


    .form-field-content {
        .form-field-tabs-inner {
            .form-field-tab {
                display: none;

                &:first-child {
                    display: block;
                }
            }
        }

        .form-field-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            max-width: 700px;

            @include phone {
                max-width: 100%;
                display: block;
            }

            &+.form-field-row {
                margin-top: 16px;
            }

            &:last-of-type {
                margin-bottom: 0;
            }

            &.form-field-row-type-conditional-logic {
                label {
                    width: auto;
                    flex-basis: initial;
                    margin-right: 12px;
                }
            }

            &.form-field-row-type-date_range {
                >div {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    position: relative;

                    input {
                        max-width: calc(50% - 5px);
                        flex-basis: calc(50% - 5px);
                        position: relative;
                        margin: 0;
                    }
                }
            }

            label {
                display: block;
                width: 160px;
                flex-basis: 160px;
                font-weight: 500;

                @include phone {
                    width: auto;
                    margin-bottom: 6px;
                }
            }

            input,
            select,
            textarea {
                flex: 1;
                width: 100%;
                max-width: 100%;
                border: 1px solid $wpbs_dark_border_color;
                box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
                border-radius: 6px;
                height: 36px;
                line-height: 36px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                margin: 0;
                min-height: 1px;

                &:hover {
                    @include input_hover;
                }

                &:focus {
                    @include input_focus;
                }

                &.wpbs-small-input {
                    max-width: 110px;
                    vertical-align: text-top;
                }
            }

            input {
                padding: 0 12px;

                &[type="number"] {
                    padding-right: 0;
                }

                &.hasDatepicker {
                    background-color: #fff !important;
                }
            }

            textarea {
                padding: 8px 12px;
                min-height: 90px;
                line-height: 130%;
            }

            select {
                padding: 0 26px 0 12px;
                line-height: 34px;
            }
        }

        .form-field-row-type-required input {
            display: block;
            float: left;
            width: auto;
            margin-top: 5px;
        }

        .form-field-row:after {
            content: "";
            clear: both;
            display: block;
        }
    }

    @include tablet_landscape_min {
        #wpbs-form-builder-modal-close {
            display: none !important;
        }
    }

    @include tablet_landscape {
        .wpbs-form-builder-elements-wrapper {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: rgba(0, 0, 0, 0.7);
            padding: 64px 24px 24px 24px;
            display: flex;
            flex-direction: column;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            @include transition;

            @at-root .wpbs-form-builder-elements-wrapper-visible & {
                opacity: 1;
                visibility: visible;
                pointer-events: all;
            }

            @include phone {
                padding-left: 16px;
                padding-right: 16px;
                padding-bottom: 16px;
            }

            .wpbs-form-builder-elements-container {
                background-color: #fff;
                border-radius: 10px;
                width: 100%;
                max-width: 1240px;
                margin: auto;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding: 24px;
                position: relative;
                overflow: auto;
                max-height: 100%;

                @include phone {
                    padding: 16px;
                }

                .wpbs-form-builder-elements-group {
                    &:first-of-type {
                        h4 {
                            margin-top: 0;
                        }
                    }
                }

                #wpbs-form-builder-modal-close {
                    color: $wpbs_text_color;
                    text-decoration: none;
                    font-size: 24px;
                    font-weight: normal;
                    position: absolute;
                    right: 20px;
                    top: 20px;
                    outline: none !important;

                    @include phone {
                        top: 12px;
                        right: 16px;
                    }

                    &:hover {
                        color: $wpbs_blue;
                    }
                }
            }

        }
    }

    .wpbs-form-builder-add-form-fields-wrapper h3 {
        font-size: 15px;
        margin-bottom: 0.5em;
    }

    .wpbs-form-builder-add-form-fields {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        @include tablet_landscape {
            justify-content: unset;
        }

        a {
            margin: 0 0 8px 0;
            padding: 12px 12px;
            display: flex;
            align-items: center;
            text-transform: capitalize;
            flex-basis: calc(50% - 4px);
            max-width: calc(50% - 4px);
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            @include tablet_landscape {
                flex-basis: calc(25% - 4px);
                max-width: calc(25% - 4px);
                margin-right: 5px;

                &:nth-child(4n) {
                    margin-right: 0;
                }
            }

            @include tablet {
                flex-basis: calc((100% / 3) - 4px);
                max-width: calc((100% / 3) - 4px);
                margin-right: 5px;

                &:nth-child(4n) {
                    margin-right: 5px;
                }

                &:nth-child(3n) {
                    margin-right: 0;
                }
            }

            @include phone {
                font-size: 12px;
                padding: 10px 8px;
                flex-basis: calc(50% - 3px);
                max-width: calc(50% - 3px);
                margin-right: 5px !important;

                &:nth-child(2n) {
                    margin-right: 0 !important;
                }
            }

            &[data-field-type="html"] {
                text-transform: uppercase;
            }

            i {
                margin-right: 8px;
                font-size: 16px;
                min-width: 20px;
                text-align: center;
            }
        }
    }

}




// Date Picker
.wp-admin .wpbs-datepicker {
    border: 1px solid $wpbs_border_color;
    box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);

    .ui-datepicker-month,
    .ui-datepicker-year {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .ui-datepicker-next,
    .ui-datepicker-prev {
        top: 5px
    }
}





// Discounts
.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule .logic-rule-value-weekdays {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule .logic-rule-value-payment_method {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule .logic-rule-value-booking_type {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule .logic-rule-value-payment_status {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule .logic-rule-form-fields {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-form-field .logic-rule-form-fields {
    display: inline-block;
}


.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule .logic-rule-user-roles {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-user_role .logic-rule-user-roles {
    display: inline-block;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-user_role input.logic-rule-value-default {
    display: none;
}


.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule .logic-rule-datepicker {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-booking-day .logic-rule-datepicker {
    display: inline-block;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-booking-day input.logic-rule-value-default {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-user input.logic-rule-value-default {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-payment_type input.logic-rule-value-default {
    display: none;
}

/* Weekday */
.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-booking-weekday input.logic-rule-value-default {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-booking-weekday select.logic-rule-value-weekdays {
    display: inline-block;
}

/* Payment Method */
.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-payment_method input.logic-rule-value-default {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-payment_method select.logic-rule-value-payment_method {
    display: inline-block;
}

/* Booking Type */
.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-booking_type input.logic-rule-value-default {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-booking_type select.logic-rule-value-booking_type {
    display: inline-block;
}

/* Payment Status */
.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-payment_status input.logic-rule-value-default {
    display: none;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group .wpbs-logic-rule.wpbs-logic-rule-payment_status select.logic-rule-value-payment_status {
    display: inline-block;
}

.wpbs-logic-form-fields .wpbs-logic-rule-group:first-of-type .wpbs-logic-rule:first-of-type .wpbs-logic-rule-remove {
    display: none !important;
}

#wpbs-logic-rule-template {
    display: none;
}


.wpbs-wrap-edit-discount .wpbs-discount-validity-row:first-child .wpbs-discount-remove-validity-period {
    display: none;
}

.wpbs-settings-field-discount-apply-to {
    display: none;
}

.wpbs-wrap-edit-coupon .wpbs-discount-validity-row:first-child .wpbs-discount-remove-validity-period {
    display: none;
}


/******************************************************************************************/
/* Edit discount Page
/******************************************************************************************/
.wrap.wpbs-wrap-edit-discount .wpbs-discount-value-field-inner .input-before .before span {
    display: none;
}


/******************************************************************************************/
/* Edit coupon Page
/******************************************************************************************/
.wrap.wpbs-wrap-edit-coupon .wpbs-coupon-value-field-inner .input-before .before span {
    display: none;
}

.wpbs-settings-field-coupon-apply-to {
    display: none;
}

.wpbs-coupon-week-days span {
    display: block;
}

.wp-list-table.wpbs_coupons .wpbs-list-table-code {
    background-color: $wpbs_border_color;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 3px 6px 1px;
    font-family: 'Courier New', monospace;
    display: inline-block;
    word-break: break-all;
}

.wp-list-table .wpbs-discount-expired {
    color: $wpbs_red;
}



.wpbs-logic-rules,
.wpbs-discount-validity-wrapper {
    display: block !important;
    width: 100%;
    min-width: 1162px;

    @media screen and (max-width: 1440px) {
        min-width: 1000px;
    }

    @media screen and (max-width: 1300px) {
        min-width: 900px;

        .wpbs-logic-rule-form-field {

            select,
            input,
            textarea {
                min-width: 40%;
            }

            .wpbs-remove-button.wpbs-logic-rule-remove {
                top: auto;
                bottom: 0;
            }

            select.logic-rule-form-fields {
                // margin-right: 56px;
            }
        }
    }

    @include tablet_landscape {
        min-width: 100%;
    }

    .wpbs-logic-rule,
    .wpbs-discount-validity-row {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        gap: 8px;
        padding-right: 46px;

        &+.wpbs-discount-validity-row {
            margin-top: 8px;

            @media screen and (max-width: 782px) {
                // margin-top: 16px;
            }
        }


        &+.wpbs-logic-rule {
            margin-top: 8px;

            @media screen and (max-width: 782px) {
                margin-top: 16px;
            }
        }

        &.wpbs-logic-rule-form-field {
            @media screen and (max-width: 782px) {

                select,
                input,
                textarea {
                    min-width: 40% !important;
                }
            }
        }

        select,
        input,
        textarea {
            flex: 1 !important;
            width: auto !important;
            max-width: none !important;
            min-width: 0px !important;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-right: 26px;
        }

        .wpbs-secondary-button {
            margin: 0 !important;
        }

        .wpbs-remove-button {
            position: absolute;
            right: 0;
            top: 0;
            margin: 0;
        }
    }

    .logic-rule-group-separator {
        text-align: center;
        margin: 8px 0;

        p {
            padding: 0;
            margin: 0;
            display: inline-block;
            background-color: lighten($wpbs_text_color, 50%);
            color: #ffffff;
            padding: 6px 0 8px 0px;
            border-radius: 6px;
            min-width: 40px;
            text-align: center;
            font-size: 13px;
            line-height: 13px;
            height: auto;
        }
    }

    .logic-rule-group-add-group {
        text-align: center;
    }

    .wpbs-discount-add-validity-period {
        margin-top: 8px !important;
    }
}

.wpbs-discount-validity-wrapper {
    min-width: unset;

    .wpbs-discount-validity-row {
        &:first-child {
            padding-right: 0;
        }
    }
}






// Customers
.wpbs-customer-data {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    @include tablet_landscape {
        display: block;
    }

    a {
        text-decoration: none;
        color: $wpbs_blue_text;

        @include tablet_landscape_min {
            &:hover {
                color: $wpbs_blue;
            }
        }
    }

    .wpbs-customer-data-left {
        flex-basis: 350px;
        margin-right: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;

        textarea {
            resize: none;
        }

        @include desktop {
            flex-basis: 300px;
            max-width: 300px;
        }

        @include tablet_landscape {
            max-width: 100%;
            margin-right: 0;
            margin-bottom: 12px;
        }

        .wpbs-customer-details {


            * {
                word-break: break-word;
            }

            p {
                position: relative;
                padding-left: 24px;
                margin: 5px 0;
                font-size: 16px;
                line-height: 130%;

                &:first-child {
                    margin-top: 0;
                }

                &:last-child {
                    margin-bottom: 0;
                }

                svg {
                    position: absolute;
                    left: 0;
                    top: 50%;
                    width: 19px;
                    height: auto;
                    transform: translate(0, -50%);

                    path {
                        fill: $wpbs_blue_text;
                    }
                }

                strong {
                    font-weight: normal
                }
            }
        }
    }

    .wpbs-customer-data-right {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        margin: -6px;

        @include phone {
            display: block;
        }

        .wpbs-box-wrapper {
            flex-basis: calc(100% / 3);
            max-width: calc(100% / 3);
            padding: 6px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            @include desktop_small {
                flex-basis: calc(100% / 2);
                max-width: calc(100% / 2);
            }

            @include phone {
                max-width: 100%;
            }

            .wpbs-box {
                min-height: 100%;
            }

            h2 {
                color: $wpbs_light_text_color;
                font-weight: normal;
                padding: 0;
            }

            h3,
            h4 {
                font-size: 32px;
                line-height: 32px;
                margin: 5px 0 0 0;

                @include desktop {
                    font-size: 24px;
                    line-height: 130%;
                }

                @include phone {
                    font-size: 20px;
                }
            }

            h4 {
                font-size: 24px;
                line-height: 130%;

                @include desktop {
                    font-size: 20px;
                }

                @include phone {
                    font-size: 18px;
                }
            }

            small {
                font-size: 14px;
                font-weight: normal;
                padding-left: 4px;
                color: $wpbs_light_text_color;
                position: relative;
                top: -1px;
            }
        }
    }
}


/** Tables */
.wpbs-booking-modal-customer-table span {
    font-weight: bold;
}

.wpbs-booking-modal-customer-table .wpbs-secondary-button {
    margin-top: 10px;
}

.wpbs-wrap-view-customer .tablenav {
    margin: 0;
    padding: 0;
    height: 12px;
}

table.wpbs_customers .column-email_address {
    width: 280px;
}


.wpbs-cst-status {
    text-transform: uppercase;
    display: inline-block;
    font-size: 13px;
    text-decoration: none;
    vertical-align: middle;
    line-height: 26px;
    border-radius: 4px;
    padding: 0 9px;
    color: #555;
    z-index: 2;
    background: $wpbs_border_color;
    font-weight: 500;
    margin-top: 2px;
}

.wpbs-cst-status span {
    position: relative;
    top: 3px;
}

.wpbs-cst-status-pending span {
    color: #ffa726;
}

.wpbs-cst-status-accepted span {
    color: #9ccc65;
}

.wpbs-cst-status-trash span {
    color: #ef5350;
}

@media screen and (min-width: 782px) {

    .wpbs-wrap-view-customer .wpbs-plugin-wrapper .wpbs-box.wpbs-transparent .wpbs-box-content.wpbs-no-padding,
    .wpbs-wrap-view-customer .wpbs-plugin-wrapper .wpbs-box.wpbs-transparent form {
        max-width: 100%;
    }

    .wpbs-wrap-view-customer .wpbs-table-wrap {
        overflow-x: auto;
        width: 100%;
    }

    .wpbs-wrap-view-customer table.wpbs_customers {
        min-width: 1300px;
    }
}

// Booking Table Statuses
.wpbs-booking-field-payment-status-tag,
.wpbs-booking-field-security-deposit-status-tag {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    padding: 4px 8px;
    border-radius: 6px;
    margin: 0;
    color: $wpbs_light_text_color;
    border: 1px solid $wpbs_dark_border_color;
    background-color: $wpbs_light_bg;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;

    span {
        font-size: 16px;
        width: 16px;
        height: 16px;
        padding-right: 3px;
    }

    // Payment Statuses
    &.wpbs-booking-field-payment-status-tag-paid {
        background-color: rgb(234 246 232);
        border-color: $wpbs_green;
        color: $wpbs_green;
    }

    &.wpbs-booking-field-payment-status-tag-cancellation-requested,
    &.wpbs-booking-field-payment-status-tag-not-paid,
    &.wpbs-booking-field-payment-status-tag-partially-refunded,
    &.wpbs-booking-field-payment-status-tag-fully-refunded {
        background-color: rgb(250 234 234);
        border-color: $wpbs_red;
        color: $wpbs_red;
    }

    &.wpbs-booking-field-payment-status-tag-deposit-paid {
        background-color: rgb(251 192 45 / 15%);
        color: #cf9c00;
        border-color: #cf9c00;
    }


    &.wpbs-booking-field-payment-status-tag-authorized {
        background-color: rgba(247, 154, 24, .3);
        border-color: #f79a18;
        color: #f79a18;
    }

    &.wpbs-booking-field-payment-status-tag-payment-on-arrival {
        color: #aa63af;
        border: 1px solid #aa63af;
        background-color: #fdefff;
    }

    &.wpbs-booking-field-payment-status-tag-manual-booking {
        background-color: rgba(0, 95, 212, .2);
        color: #005fd4;
        border-color: #005fd4;
    }



    // Security Deposit Status
    &.wpbs-booking-field-security-deposit-status-tag-ok {
        border-color: rgb(160 212 151);
        background-color: rgb(234 246 232);
        color: $wpbs_green;
    }

    &.wpbs-booking-field-security-deposit-status-tag-not-ok {
        border-color: rgb(232 161 161);
        background-color: rgb(250 234 234);
        color: $wpbs_red;
    }

    &.wpbs-booking-field-security-deposit-status-tag-na {
        color: #8b8b8b;
    }

    &.wpbs-booking-field-security-deposit-status-tag-pending {
        background-color: rgb(251 192 45 / 15%);
        color: #cf9c00;
        border-color: #cf9c00;
    }
}

.wpbs-bm-status {
    display: inline-block;
    font-size: 13px;
    text-decoration: none;
    vertical-align: middle;
    line-height: 20px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 500;
    z-index: 2;
    color: $wpbs_light_text_color;
    background-color: $wpbs_lighter_bg;
    font-weight: 500;
    border: 1px solid $wpbs_dark_border_color;

    span {
        position: relative;
        margin-left: -3px;
        margin-right: 2px;
    }

    &.wpbs-bm-status-pending span {
        color: #ffa726;
    }

    &.wpbs-bm-status-accepted span {
        color: #9ccc65;
    }

    &.wpbs-bm-status-cancelled span {
        color: #3ba6e7;
    }

    &.wpbs-bm-status-trash span {
        color: #ef5350;
    }

}





// Booking Manager
@media screen and (min-width: 767px) {
    .wpbs-wrap-bookings {
        .wpbs-table-wrap {
            overflow-x: auto;
            width: 100%;
        }
    }
}

.wpbs-wrap-bookings {

    .wpbs-no-overflow {
        overflow: visible;
    }

    .tablenav.bottom {
        @include tablet_min {
            height: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
        }

        @include tablet {
            .tablenav-pages {
                margin-top: 0;
            }

            .wpbs-bm-export-button {
                display: none;
            }
        }
    }
}

@include tablet_landscape {
    table.wpbs_bookings {
        @include tablet_min {
            min-width: 1700px;
        }
    }

    table.wpbs_discounts {
        @include tablet_min {
            min-width: 1000px;
        }
    }

    table.wpbs_coupons {
        @include tablet_min {
            min-width: 1200px;
        }
    }

    table.wpbs_customers {
        @include tablet_min {
            min-width: 1200px;
        }
    }
}

table.wpbs_bookings {
    table-layout: auto;

    th.sortable {
        a {
            display: flex;
        }
    }

    .column-id {
        width: 70px;
    }

    .column-status {
        width: 110px;
    }

    .column-view {
        width: 120px;

        .wpbs-secondary-button {
            padding-top: 6px;
            padding-bottom: 6px;
        }
    }

    .column-stay_length {
        width: 80px;
    }

    .column-security_deposit {
        width: 103px;
    }

    .column-booking_start_date,
    .column-booking_end_date,
    .column-date_created {
        width: 145px;
    }

    .column-payment_status {
        width: 164px;
    }

    .widefat * {
        word-wrap: initial !important;
    }

    * {
        word-wrap: initial !important;
    }

    th,
    .column-status,
    .column-view {
        white-space: nowrap;
    }
}

/** 
* Bookings manager calendar 
*/

/** View Switch */
.wpbs-bm-view-switch {
    border: 1px solid $wpbs_dark_border_color;
    display: flex;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
    padding: 4px 12px 4px 12px;

    p {
        margin: 0;
        position: relative;
        top: -1px;
        margin-right: 4px;
    }

    a {
        text-decoration: none;
        width: auto;
        font-weight: 500;
        color: $wpbs_light_text_color;
        font-size: 13px;
        line-height: 26px;
        height: 28px;
        display: inline-block;
        outline: none;
        box-shadow: none;

        @include phone {
            line-height: 29px;
        }

        &+a {
            margin-left: 16px;
        }

        @include tablet_landscape_min {
            &:hover {
                color: $wpbs_text_color;
            }
        }

        &:before {
            color: $wpbs_lighter_text_color;
            vertical-align: top;
            position: relative !important;
            top: 4px !important;

            @include tablet_landscape_min {
                &:hover {
                    color: $wpbs_light_text_color;
                }
            }
        }

        &.current {
            color: $wpbs_text_color;

            &:before {
                color: $wpbs_blue;

                @include tablet_landscape_min {
                    &:hover {
                        color: darken($wpbs_blue, 10%);
                    }
                }
            }
        }

    }
}


/** Month Navigation */
.wpbs-bm-select-container {
    float: left;

    select {
        min-height: 26px !important;
        height: 26px;
        line-height: 24px;
        font-weight: normal;
        border-radius: 4px;
        font-size: 12px;
        width: 125px;
        border: 1px solid $wpbs_border_color;
        margin: 0 2px;
    }
}

.wpbs-bm-calendar-header-navigation {
    padding-top: 17px;
    padding-left: 10px;

    .wpbs-prev {
        position: relative;
        display: block;
        height: 26px;
        width: 26px;
        line-height: 26px;
        text-decoration: none;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #fff;
        background: #bdc3c7;
        border-radius: 2px;
        float: left;
    }

    .wpbs-next {
        position: relative;
        display: block;
        height: 26px;
        width: 26px;
        line-height: 26px;
        text-decoration: none;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #fff;
        background: #bdc3c7;
        border-radius: 2px;
        float: left;

        .wpbs-arrow {
            position: absolute;
            top: 50%;
            margin-top: -5px;
            display: inline-block;
            width: 0;
            height: 0;
            border-style: solid;
        }
    }

    .wpbs-prev .wpbs-arrow {
        position: absolute;
        top: 50%;
        margin-top: -5px;
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
    }

    .wpbs-next .wpbs-arrow {
        right: 50%;
        margin-right: -5px;
        border-width: 5px 0 5px 8.7px;
        border-color: transparent transparent transparent #ffffff;
    }

    .wpbs-prev .wpbs-arrow {
        left: 50%;
        margin-left: -5px;
        border-width: 5px 8.7px 5px 0;
        border-color: transparent #fff transparent transparent;
    }
}


/** Calendar Styles */
.wpbs-bm-calendar-wrapper {
    position: relative;
    border: 1px solid $wpbs_dark_border_color;
    border-radius: 6px;
    box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
    margin-bottom: 40px;
    width: 100%;
    background: #fff;
}

.wpbs-bm-calendar {

    &:after {
        clear: both;
        content: "";
        display: block;
    }

    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .wpbs-legend-item-icon[data-type="split"] div svg {
        width: 101%;
    }
}

.wpbs-bm-calendar-row {
    min-width: 1700px;
    height: 80px;

    &:last-of-type {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    &:last-child {

        .wpbs-bm-calendar-col-fixed,
        .wpbs-bm-calendar-day {
            border-bottom: none !important;
        }

        .wpbs-bm-calendar-col-fixed {
            border-bottom-left-radius: 6px;
        }

        .wpbs-bm-calendar-day:last-of-type {
            border-bottom-right-radius: 6px;
        }
    }

    .wpbs-bm-calendar-col-fixed {
        width: 198px;
        position: absolute;
        left: 0px;
        background: #fff;
        min-height: 80px;
        // border-left: 1px solid $wpbs_border_color;
        border-right: 1px solid $wpbs_border_color;
        border-top: 1px solid $wpbs_border_color;
        z-index: 2;
    }

    &:last-child {

        .wpbs-bm-calendar-col-fixed,
        .wpbs-bm-calendar-col-dates .wpbs-bm-calendar-day {
            border-bottom: 1px solid $wpbs_border_color;
        }
    }
}

.wpbs-bm-calendar-row-header-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff;
    overflow: hidden;
    z-index: 5;
    margin-bottom: -1px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.wpbs-bm-calendar-row-header {
    height: 60px;
    font-size: 16px;
    text-align: center;

    .wpbs-bm-calendar-day,
    .wpbs-bm-calendar-col-fixed {
        border-top: none !important;
    }

    .wpbs-bm-calendar-col-fixed {
        border-top-left-radius: 6px;
    }

    .wpbs-bm-calendar-day:last-of-type {
        border-top-right-radius: 6px;
    }
}

body.admin-bar .wpbs-bm-calendar-row-header-wrapper {
    top: 100px;
}

.wpbs-bm-calendar-row-header {
    .wpbs-bm-calendar-col-fixed {
        min-height: 60px;
    }

    small {
        display: block;
        padding-top: 10px;
    }

    span {
        font-weight: bold;
        display: block;
    }

    .wpbs-bm-calendar-day-other-month {
        color: $wpbs_border_color;
    }
}

.wpbs-bm-calendar-day.wpbs-bm-today {
    background-color: #ffffe5;
}

.wpbs-bm-calendar-rows-wrapper {
    overflow-x: auto;

    a {
        color: $wpbs_blue_text;

        @include tablet_landscape_min {
            &:hover {
                color: $wpbs_blue;
            }
        }
    }
}

.wpbs-bm-calendar-row .wpbs-bm-calendar-col-dates {
    margin-left: 198px;
    width: calc(100% - 198px);
    height: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

.wpbs-bm-calendar-col-dates {
    &:after {
        content: "";
        display: block;
        clear: both;
    }

    .wpbs-bm-calendar-day {
        width: calc(100% / 31);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        border-right: 1px solid $wpbs_border_color;
        border-top: 1px solid $wpbs_border_color;
        height: 100%;
        min-height: 100%;

        &:last-child {
            border-right: none;
        }

        .wpbs-date {
            position: relative;
        }

        span.wpbs-daily-price {
            position: absolute;
            z-index: 1;
            top: 3px;
            left: 4px;
            color: #666;
        }
    }

    svg.ical-changeover {
        display: block !important;
        position: absolute;
        z-index: 1;
        width: 100%;
        left: 0;
        top: 0;
        height: 24px;
    }

    .wpbs-bm-calendar-day .wpbs-legend-item-icon {
        border-radius: 0;
        width: 100%;
    }
}

.wpbs-bm-calendar-row-body-even {
    background: #fafafa;

    .wpbs-bm-calendar-col-fixed {
        background: #fafafa;
    }
}

.wpbs-bm-calendar-col-fixed.wpbs-bm-calendar-name {
    font-size: 15px;
    padding: 10px;

    span a {
        font-weight: bold;
        display: block;
        text-decoration: none;
        color: #3c434a;
        font-size: 15px;

        @include phone {
            font-size: 14px;
        }

        &:hover {
            text-decoration: underline;
        }
    }

    a {
        font-size: 12px;

        &:hover {
            text-decoration: none;
        }
    }
}

/** Booking */
.wpbs-bm-booking {
    height: 26px;
    position: absolute;
    color: #fff;
    top: 40px;
    border-radius: 26px;
    font-size: 14px;
    font-weight: bold;
    padding: 0 10px;
    line-height: 26px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    small {
        margin-left: 5px;
        white-space: nowrap;
        display: block;
        float: left;
        font-weight: normal;
        font-size: 11px;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
}

a.wpbs-bm-booking:hover {
    opacity: 0.8;
    color: #fff;
}

.wpbs-box-table-wrapper .wpbs-table-wrap .wpbs_bookings td:first-child {
    padding-left: 10px;
}

.wpbs-bm-calendar span.wpbs-booking-color-status-pending {
    background-color: $wpbs_border_color !important;
    border: 2px dotted #ccc;

    small {
        line-height: 22px;
        color: #000;
    }
}

.wpbs-bm-calendar-row:not(.wpbs-bm-calendar-row-header):hover {
    background: #ffffe5;

    .wpbs-bm-calendar-col-fixed {
        background: #ffffe5;
    }
}

.wpbs-bm-calendar-day {
    &.hover {
        background: #ffffe5;
    }

    &:hover {
        background: #ffffbf;
    }
}

.wpbs-bm-booking-start-0 {
    border-radius: 0;
    -webkit-border-top-right-radius: 26px !important;
    -webkit-border-bottom-right-radius: 26px !important;
    -moz-border-radius-topright: 26px !important;
    -moz-border-radius-bottomright: 26px !important;
    border-top-right-radius: 26px !important;
    border-bottom-right-radius: 26px !important;
    left: calc(100% / 31 * 0 + 100% / 62);

    &.wpbs-bm-booking-span-0 {
        width: calc(100% / 31 - 2px);
        left: -5px;
    }


}

a.wpbs-bm-booking-start-0 {
    &:before {
        width: 30px;
        position: absolute;
        left: -30px;
        height: 100%;
        background-color: inherit;
        content: "";
        display: block;
        border-left: none;
        border-right: none;
    }
}

span.wpbs-bm-booking-start-0 {
    &:before {
        width: 30px;
        position: absolute;
        left: -30px;
        top: -2px;
        height: 100%;
        background-color: inherit;
        content: "";
        display: block;
        border: 2px dotted #ccc;
        border-left: none;
        border-right: none;
    }
}

.wpbs-bm-booking-start-1 {
    left: calc(100% / 31 * 0 + 100% / 62);
}

.wpbs-bm-booking-start-2 {
    left: calc(100% / 31 * 1 + 100% / 62);
}

.wpbs-bm-booking-start-3 {
    left: calc(100% / 31 * 2 + 100% / 62);
}

.wpbs-bm-booking-start-4 {
    left: calc(100% / 31 * 3 + 100% / 62);
}

.wpbs-bm-booking-start-5 {
    left: calc(100% / 31 * 4 + 100% / 62);
}

.wpbs-bm-booking-start-6 {
    left: calc(100% / 31 * 5 + 100% / 62);
}

.wpbs-bm-booking-start-7 {
    left: calc(100% / 31 * 6 + 100% / 62);
}

.wpbs-bm-booking-start-8 {
    left: calc(100% / 31 * 7 + 100% / 62);
}

.wpbs-bm-booking-start-9 {
    left: calc(100% / 31 * 8 + 100% / 62);
}

.wpbs-bm-booking-start-10 {
    left: calc(100% / 31 * 9 + 100% / 62);
}

.wpbs-bm-booking-start-11 {
    left: calc(100% / 31 * 10 + 100% / 62);
}

.wpbs-bm-booking-start-12 {
    left: calc(100% / 31 * 11 + 100% / 62);
}

.wpbs-bm-booking-start-13 {
    left: calc(100% / 31 * 12 + 100% / 62);
}

.wpbs-bm-booking-start-14 {
    left: calc(100% / 31 * 13 + 100% / 62);
}

.wpbs-bm-booking-start-15 {
    left: calc(100% / 31 * 14 + 100% / 62);
}

.wpbs-bm-booking-start-16 {
    left: calc(100% / 31 * 15 + 100% / 62);
}

.wpbs-bm-booking-start-17 {
    left: calc(100% / 31 * 16 + 100% / 62);
}

.wpbs-bm-booking-start-18 {
    left: calc(100% / 31 * 17 + 100% / 62);
}

.wpbs-bm-booking-start-19 {
    left: calc(100% / 31 * 18 + 100% / 62);
}

.wpbs-bm-booking-start-20 {
    left: calc(100% / 31 * 19 + 100% / 62);
}

.wpbs-bm-booking-start-21 {
    left: calc(100% / 31 * 20 + 100% / 62);
}

.wpbs-bm-booking-start-22 {
    left: calc(100% / 31 * 21 + 100% / 62);
}

.wpbs-bm-booking-start-23 {
    left: calc(100% / 31 * 22 + 100% / 62);
}

.wpbs-bm-booking-start-24 {
    left: calc(100% / 31 * 23 + 100% / 62);
}

.wpbs-bm-booking-start-25 {
    left: calc(100% / 31 * 24 + 100% / 62);
}

.wpbs-bm-booking-start-26 {
    left: calc(100% / 31 * 25 + 100% / 62);
}

.wpbs-bm-booking-start-27 {
    left: calc(100% / 31 * 26 + 100% / 62);
}

.wpbs-bm-booking-start-28 {
    left: calc(100% / 31 * 27 + 100% / 62);
}

.wpbs-bm-booking-start-29 {
    left: calc(100% / 31 * 28 + 100% / 62);
}

.wpbs-bm-booking-start-30 {
    left: calc(100% / 31 * 29 + 100% / 62);
}

.wpbs-bm-booking-start-31 {
    left: calc(100% / 31 * 30 + 100% / 62);
}

.wpbs-bm-booking-start-full-day-0 {
    left: calc(100% / 31 * 0);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.wpbs-bm-booking-start-full-day-1 {
    left: calc(100% / 31 * 0);
}

.wpbs-bm-booking-start-full-day-2 {
    left: calc(100% / 31 * 1);
}

.wpbs-bm-booking-start-full-day-3 {
    left: calc(100% / 31 * 2);
}

.wpbs-bm-booking-start-full-day-4 {
    left: calc(100% / 31 * 3);
}

.wpbs-bm-booking-start-full-day-5 {
    left: calc(100% / 31 * 4);
}

.wpbs-bm-booking-start-full-day-6 {
    left: calc(100% / 31 * 5);
}

.wpbs-bm-booking-start-full-day-7 {
    left: calc(100% / 31 * 6);
}

.wpbs-bm-booking-start-full-day-8 {
    left: calc(100% / 31 * 7);
}

.wpbs-bm-booking-start-full-day-9 {
    left: calc(100% / 31 * 8);
}

.wpbs-bm-booking-start-full-day-10 {
    left: calc(100% / 31 * 9);
}

.wpbs-bm-booking-start-full-day-11 {
    left: calc(100% / 31 * 10);
}

.wpbs-bm-booking-start-full-day-12 {
    left: calc(100% / 31 * 11);
}

.wpbs-bm-booking-start-full-day-13 {
    left: calc(100% / 31 * 12);
}

.wpbs-bm-booking-start-full-day-14 {
    left: calc(100% / 31 * 13);
}

.wpbs-bm-booking-start-full-day-15 {
    left: calc(100% / 31 * 14);
}

.wpbs-bm-booking-start-full-day-16 {
    left: calc(100% / 31 * 15);
}

.wpbs-bm-booking-start-full-day-17 {
    left: calc(100% / 31 * 16);
}

.wpbs-bm-booking-start-full-day-18 {
    left: calc(100% / 31 * 17);
}

.wpbs-bm-booking-start-full-day-19 {
    left: calc(100% / 31 * 18);
}

.wpbs-bm-booking-start-full-day-20 {
    left: calc(100% / 31 * 19);
}

.wpbs-bm-booking-start-full-day-21 {
    left: calc(100% / 31 * 20);
}

.wpbs-bm-booking-start-full-day-22 {
    left: calc(100% / 31 * 21);
}

.wpbs-bm-booking-start-full-day-23 {
    left: calc(100% / 31 * 22);
}

.wpbs-bm-booking-start-full-day-24 {
    left: calc(100% / 31 * 23);
}

.wpbs-bm-booking-start-full-day-25 {
    left: calc(100% / 31 * 24);
}

.wpbs-bm-booking-start-full-day-26 {
    left: calc(100% / 31 * 25);
}

.wpbs-bm-booking-start-full-day-27 {
    left: calc(100% / 31 * 26);
}

.wpbs-bm-booking-start-full-day-28 {
    left: calc(100% / 31 * 27);
}

.wpbs-bm-booking-start-full-day-29 {
    left: calc(100% / 31 * 28);
}

.wpbs-bm-booking-start-full-day-30 {
    left: calc(100% / 31 * 29);
}

.wpbs-bm-booking-start-full-day-31 {
    left: calc(100% / 31 * 30);
}

.wpbs-bm-booking-span-0,
.wpbs-bm-booking-span-1 {
    width: calc(100% / 31 * 1 - 2px);
}

.wpbs-bm-booking-span-2 {
    width: calc(100% / 31 * 2 - 2px);
}

.wpbs-bm-booking-span-3 {
    width: calc(100% / 31 * 3 - 2px);
}

.wpbs-bm-booking-span-4 {
    width: calc(100% / 31 * 4 - 2px);
}

.wpbs-bm-booking-span-5 {
    width: calc(100% / 31 * 5 - 2px);
}

.wpbs-bm-booking-span-6 {
    width: calc(100% / 31 * 6 - 2px);
}

.wpbs-bm-booking-span-7 {
    width: calc(100% / 31 * 7 - 2px);
}

.wpbs-bm-booking-span-8 {
    width: calc(100% / 31 * 8 - 2px);
}

.wpbs-bm-booking-span-9 {
    width: calc(100% / 31 * 9 - 2px);
}

.wpbs-bm-booking-span-10 {
    width: calc(100% / 31 * 10 - 2px);
}

.wpbs-bm-booking-span-11 {
    width: calc(100% / 31 * 11 - 2px);
}

.wpbs-bm-booking-span-12 {
    width: calc(100% / 31 * 12 - 2px);
}

.wpbs-bm-booking-span-13 {
    width: calc(100% / 31 * 13 - 2px);
}

.wpbs-bm-booking-span-14 {
    width: calc(100% / 31 * 14 - 2px);
}

.wpbs-bm-booking-span-15 {
    width: calc(100% / 31 * 15 - 2px);
}

.wpbs-bm-booking-span-16 {
    width: calc(100% / 31 * 16 - 2px);
}

.wpbs-bm-booking-span-17 {
    width: calc(100% / 31 * 17 - 2px);
}

.wpbs-bm-booking-span-18 {
    width: calc(100% / 31 * 18 - 2px);
}

.wpbs-bm-booking-span-19 {
    width: calc(100% / 31 * 19 - 2px);
}

.wpbs-bm-booking-span-20 {
    width: calc(100% / 31 * 20 - 2px);
}

.wpbs-bm-booking-span-21 {
    width: calc(100% / 31 * 21 - 2px);
}

.wpbs-bm-booking-span-22 {
    width: calc(100% / 31 * 22 - 2px);
}

.wpbs-bm-booking-span-23 {
    width: calc(100% / 31 * 23 - 2px);
}

.wpbs-bm-booking-span-24 {
    width: calc(100% / 31 * 24 - 2px);
}

.wpbs-bm-booking-span-25 {
    width: calc(100% / 31 * 25 - 2px);
}

.wpbs-bm-booking-span-26 {
    width: calc(100% / 31 * 26 - 2px);
}

.wpbs-bm-booking-span-27 {
    width: calc(100% / 31 * 27 - 2px);
}

.wpbs-bm-booking-span-28 {
    width: calc(100% / 31 * 28 - 2px);
}

.wpbs-bm-booking-span-29 {
    width: calc(100% / 31 * 29 - 2px);
}

.wpbs-bm-booking-span-30 {
    width: calc(100% / 31 * 30 - 2px);
}

.wpbs-bm-booking-span-31 {
    width: calc(100% / 31 * 31 - 2px);
}

.wpbs-bm-booking-span-32 {
    width: calc(100% / 31 * 32 - 2px);
}

.wpbs-bm-booking-span-33 {
    width: calc(100% / 31 * 33 - 2px);
}

.wpbs-bm-booking-span-34 {
    width: calc(100% / 31 * 34 - 2px);
}

.wpbs-bm-booking-span-35 {
    width: calc(100% / 31 * 35 - 2px);
}

.wpbs-bm-booking-span-36 {
    width: calc(100% / 31 * 36 - 2px);
}

.wpbs-bm-booking-span-37 {
    width: calc(100% / 31 * 37 - 2px);
}

.wpbs-bm-booking-span-38 {
    width: calc(100% / 31 * 38 - 2px);
}

.wpbs-bm-booking-span-39 {
    width: calc(100% / 31 * 39 - 2px);
}

.wpbs-bm-booking-span-40 {
    width: calc(100% / 31 * 40 - 2px);
}

.wpbs-bm-booking-span-41 {
    width: calc(100% / 31 * 41 - 2px);
}

.wpbs-bm-booking-span-42 {
    width: calc(100% / 31 * 42 - 2px);
}

.wpbs-bm-booking-span-43 {
    width: calc(100% / 31 * 43 - 2px);
}

.wpbs-bm-booking-span-44 {
    width: calc(100% / 31 * 44 - 2px);
}

.wpbs-bm-booking-span-45 {
    width: calc(100% / 31 * 45 - 2px);
}

.wpbs-bm-booking-span-46 {
    width: calc(100% / 31 * 46 - 2px);
}

.wpbs-bm-booking-span-47 {
    width: calc(100% / 31 * 47 - 2px);
}

.wpbs-bm-booking-span-48 {
    width: calc(100% / 31 * 48 - 2px);
}

.wpbs-bm-booking-span-49 {
    width: calc(100% / 31 * 49 - 2px);
}

.wpbs-bm-booking-span-50 {
    width: calc(100% / 31 * 50 - 2px);
}

.wpbs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
}

.wpbs-form-container {
    .wpbs-overlay {
        background: transparent;
    }

    &.wpbs-is-loading>* {
        opacity: 0.6;
    }
}

.wpbs-main-wrapper .wpbs-form-container .wpbs-form-field.wpbs-form-field-total.wpbs-is-loading>* {
    opacity: 0.6;
}

.wpbs-overlay-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -6px;
    margin-left: -35px;
    width: 70px;
    text-align: center;

    >div {
        width: 12px;
        height: 12px;
        background-color: #333;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .wpbs-overlay-bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .wpbs-overlay-bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }
}

@-webkit-keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
    }
}

@keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.wpbs-bm-export-button {
    float: right;
    margin-right: 10px !important;
}



// Reporting
.wpbs-reporting-container {
    .wpbs-reporting-row {
        display: flex;
        margin-bottom: 24px;

        @include phone {
            display: block;
        }

        &:last-child {
            display: block;
        }

        h2 {
            flex-basis: 100%;
        }

        .wpbs-reporting-chart {
            flex: 1;
            background-color: #fff;
            border: 1px solid $wpbs_dark_border_color;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            border-radius: 6px;
            padding: 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            @include phone {
                padding: 16px;
            }

            h2 {
                text-align: center;
            }

            .wpbs-reporting-chart-wrap {
                height: 504px;
                margin-top: 15px;

                @include desktop {
                    height: 400px;
                }

                @include desktop_small {
                    font-size: 340px;
                }
            }
        }

        .wpbs-reporting-chart-stats {
            flex-basis: 250px;
            max-width: 250px;
            margin-left: 24px;

            @include tablet_landscape {
                margin-left: 16px;
            }

            @include tablet {
                flex-basis: 200px;
                max-width: 200px;
            }

            @include phone {
                max-width: 100%;
                margin-left: 0;
                margin-top: 16px;
            }

            .wpbs-reporting-chart-stat {
                background-color: #fff;
                border: 1px solid $wpbs_dark_border_color;
                box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
                border-radius: 6px;
                padding: 20px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;

                @include phone {
                    padding: 16px;
                }

                h2 {
                    @include desktop {
                        font-size: 18px !important;
                    }
                }

                h3 {
                    color: $wpbs_blue;
                    font-size: 32px;
                    margin: 0 0 20px 0;

                    @include desktop {
                        font-size: 28px;
                    }
                }

                small {
                    font-size: 14px;
                    line-height: 130%;
                    color: $wpbs_light_text_color;
                }

                &+.wpbs-reporting-chart-stat {
                    margin-top: 24px;

                    @include desktop {
                        margin-top: 16px;
                    }
                }
            }
        }
    }
}



// Dashboard
#wpbs-dashboard-widgets-wrap {
    width: 100%;

    #dashboard-widgets-wrap {
        overflow: visible;

        #dashboard-widgets {
            padding: 0;
            margin: 0 -4px;

            .postbox-container {
                width: 50% !important;

                .meta-box-sortables.ui-sortable {
                    padding: 0;
                }

                @include desktop_small {
                    width: 100% !important;

                    #primary-sortables {
                        margin-bottom: 0;
                    }
                }

                .postbox {
                    background-color: #fff;
                    border-radius: 6px;
                    border: 1px solid $wpbs_dark_border_color;
                    box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
                    overflow: hidden;

                    @include phone {
                        font-size: 12px;

                        tr,
                        td,
                        th,
                        .wpbs-event,
                        .wpbs-list-table-id {
                            font-size: 12px;
                        }

                        .wpbs-has-scrollbar {
                            position: relative;

                            .inside {
                                overflow: auto;
                            }

                            &:after {
                                content: "";
                                position: absolute;
                                right: 0;
                                top: 1px;
                                width: calc(150px - 1px);
                                height: calc(100% - 2px);
                                z-index: 1;
                                background: rgb(255, 255, 255);
                                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
                                @include transition;
                                pointer-events: none;
                            }

                            &.wpbs-scrolled-to-end {
                                &:after {
                                    opacity: 0;
                                }
                            }
                        }

                    }

                    .postbox-header {
                        padding: 8px 14px;
                        margin: 0;
                        border-bottom: 1px solid $wpbs_border_color;

                        h2 {
                            font-size: 16px;
                            padding: 2px 0 !important;
                            margin: 0;
                        }

                        .wpbs-dashboard-notification-count {
                            display: inline-block;
                            vertical-align: middle;
                            box-sizing: border-box;
                            padding: 0 5px;
                            min-width: 18px;
                            height: 18px;
                            border-radius: 9px;
                            background-color: #d63638;
                            color: #fff;
                            font-size: 11px;
                            line-height: 18px;
                            text-align: center;
                            position: relative;
                            top: -1px;
                        }

                        .handlediv {
                            outline: none !important;
                            box-shadow: none !important;

                            @include tablet_landscape_min {
                                &:hover {
                                    .toggle-indicator {
                                        color: $wpbs_blue;
                                    }
                                }
                            }

                            &[aria-expanded="true"] {
                                .toggle-indicator {
                                    transform: rotate(180deg) !important;
                                }
                            }

                            .toggle-indicator {
                                outline: none !important;
                                display: block;
                                @include transition;

                                &:before {
                                    content: "\e91b";
                                    font-family: 'icons-font' !important;
                                }
                            }
                        }
                    }

                    .wpbs-event-dismiss-all {
                        position: absolute;
                        right: 14px;
                        top: 11px;
                        color: $wpbs_red;
                        text-decoration: none;
                        font-weight: 500;
                        font-size: 14px;
                        line-height: 160%;

                        i {
                            display: inline-block;
                            margin-right: 3px;
                        }

                        @include tablet_landscape_min {
                            &:hover {
                                color: darken($wpbs_red, 10%);
                            }
                        }

                        @include phone {
                            display: none;
                        }
                    }

                    .inside {
                        padding: 0;
                    }

                    table {
                        padding: 0;
                        margin: 0;
                        width: 100%;
                        border-collapse: collapse;

                        tr {
                            th {
                                background-color: $wpbs_light_bg;
                                font-size: 13px;
                                line-height: 16px;
                                font-weight: 500;
                                padding: 14px 14px;
                                text-align: left;
                            }

                            td {
                                padding: 10px 14px;
                                border-top: 1px solid $wpbs_border_color;

                                a {
                                    text-decoration: none;
                                    color: $wpbs_blue_text;
                                    font-weight: 500;
                                    display: inline-block;

                                    @include tablet_landscape_min {
                                        &:hover {
                                            color: $wpbs_blue;
                                        }
                                    }

                                    &.wpbs-event-dismiss {
                                        color: $wpbs_red;
                                        position: relative;
                                        top: 1px;

                                        @include tablet_landscape_min {
                                            &:hover {
                                                color: darken($wpbs_red, 10%);
                                            }
                                        }
                                    }
                                }
                            }

                            @include tablet_landscape_min {
                                &:hover {
                                    td {
                                        background-color: $wpbs_lighter_bg;
                                    }
                                }
                            }
                        }
                    }

                    /* Table Overflow */
                    .wpbs-card-table-overflow {
                        max-height: 401px;
                        overflow: auto;

                        thead {
                            position: sticky;
                            top: 0;
                            z-index: 1;

                            &:after {
                                content: "";
                                display: block;
                                position: absolute;
                                left: 0;
                                bottom: 0;
                                width: 100%;
                                height: 1px;
                                background-color: $wpbs_border_color;
                            }
                        }
                    }


                }

                .wpbs-card-need-help-content {
                    padding: 3px 14px 14px 14px;

                    .wpbs-buttons {
                        display: flex;
                        align-items: center;

                        @include phone {
                            display: block;
                        }

                        input,
                        a,
                        button {
                            margin: 0;
                            display: inline-block;

                            &+input,
                            &+a,
                            &+button {
                                margin-left: 8px !important;

                                @include phone {
                                    margin-top: 8px !important;
                                    margin-left: 0 !important;
                                }
                            }
                        }
                    }

                    p {
                        margin-top: 0;
                    }
                }
            }
        }
    }
}




// Quick Links
.wpbs-quick-links {
    margin: -5px;
    display: flex;
    flex-wrap: wrap;
    padding: 3px 14px 14px 14px;

    @include phone {
        padding-left: 9px;
        padding-right: 9px;
        margin-left: 0;
        margin-right: 0;
    }

    .wpbs-quick-link {
        flex-basis: 25%;
        max-width: 25%;
        padding: 5px;
        box-sizing: border-box;

        @include phone {
            flex-basis: 50%;
            max-width: 50%;
        }

        a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 100%;
            text-align: center;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .15);
            border-radius: 6px;
            padding: 15px 10px;
            text-decoration: none;
            box-sizing: border-box;

            &:hover {
                background: lighten($wpbs_blue, 30%);
            }

            svg {
                height: 20px;
                margin-bottom: 5px;

                path {
                    fill: $wpbs_blue
                }
            }

            span {
                display: block;
                text-align: center;
                font-size: 14px;
                line-height: 130%;
                font-weight: 500;
                text-decoration: none;
                color: $wpbs_text_color;
            }

            small {
                font-size: 13px;
                color: $wpbs_light_text_color;
            }
        }
    }
}




// Events
#wpbs-dashboard-widgets-wrap span.wpbs-list-table-id {
    padding: 7px 10px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    background-color: #ccc;

    &.wpbs-list-table-id-icalendar {
        background-color: #e5e5e5 !important;
        border: 2px dotted #ccc;
        padding: 5px 8px;
        color: #000;
        font-size: 11px;
        font-weight: normal;
    }
}


.wpbs-event {
    color: #fff;
    background-color: #bbb;
    padding: 7px 10px;
    border-radius: 6px;
    display: inline-block;
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
}

.wpbs-event.wpbs-event-type-booking {
    background: #649b78;
}

.wpbs-event.wpbs-event-type-payment {
    background: #e99494;
}

.wpbs-event.wpbs-event-type-email {
    background: #5ca1d3;
}

.wpbs-event.wpbs-event-type-sms {
    background: #d1a85a;
}




// Single Calendar
#wpbs-bookings-wrap {
    max-width: 100%;
}

#wpbs-bookings {
    max-width: 100%;

    .wpbs-box-content {
        padding-bottom: 20px;
    }

    .wpbs-booking-field {
        .wpbs-booking-field-tags {
            display: flex;
            align-items: center;
        }

        .wpbs-booking-field-new-booking {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: $wpbs_red;
            margin-left: 8px;
            padding: 0 !important;
        }
    }
}

.wpbs-bookings-header {
    .wpbs-form-field {
        display: flex;
        align-items: center;

        .wpbs-input {
            &+.wpbs-input {
                margin-left: 8px;
            }
        }

        @include phone {
            flex-wrap: wrap;

            .wpbs-input {
                &:nth-child(1) {
                    flex-basis: 100%;
                    margin-top: 4px;
                    margin-bottom: 8px;
                }

                &:nth-child(2) {
                    flex-basis: calc(50% - 4px);
                    margin-left: 0;
                    margin-right: 8px;
                }

                &:nth-child(3) {
                    flex-basis: calc(50% - 4px);
                    margin-left: 0;
                    margin-right: 0;
                }

                &:nth-child(4) {
                    flex-basis: 100%;
                    margin: 8px 0 0 0;
                }
            }
        }
    }
}

.wpbs-edit-calendar-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
    width: 100%;

    @include tablet {
        flex-direction: column;
        flex-wrap: initial;
    }

    .wpbs-box {
        margin-top: 24px;

        .wpbs-box-content {
            >p:first-child {
                margin-top: 0;
                margin-bottom: 16px;
            }
        }
    }

    .wpbs-edit-calendar-sidebar {
        flex-basis: 326px;
        width: 326px;
        margin-right: 24px;

        @include desktop {
            flex-basis: 280px;
            width: 280px;
        }

        @include tablet {
            flex-basis: 100%;
            width: 100%;
            margin-right: 0;
            order: 2;
        }

        .wpbs-box {
            .wpbs-box-content {
                padding-bottom: 20px;
            }

            .wpbs-calendars {
                margin: 0;

                .wpbs-calendar {
                    background-color: transparent;
                    border: none;
                    margin: 0;

                    .wpbs-calendar-header-navigation {
                        padding-left: 34px;
                        padding-right: 34px;
                    }

                    .wpbs-prev,
                    .wpbs-next {
                        width: 30px !important;
                        height: 30px !important;
                        line-height: 30px !important;
                        margin-top: -15px !important;
                    }
                }

                .wpbs-calendar-wrapper {
                    background-color: #ffffff;
                }
            }

            .wpbs-legend-item {
                &:last-child {
                    margin-bottom: 0;
                }

                .wpbs-legend-item-icon {
                    border: 1px solid $wpbs_border_color;
                    width: 30px;
                    height: 30px;
                    border-radius: 6px;
                }
            }

            .wpbs-box-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
    }

    .wpbs-edit-calendar-main-content {
        flex: 1;
        max-width: calc(100% - 326px - 24px);

        @include desktop {
            max-width: calc(100% - 280px - 24px);
        }

        @include desktop_small {
            .wpbs-box-content {
                .wpbs-tab-edit-dates {
                    margin-right: -20px;
                    position: relative;

                    &:after {
                        content: "";
                        position: absolute;
                        right: 0;
                        top: -20px;
                        width: calc(150px - 1px);
                        height: calc(100% + 20px);
                        z-index: 1;
                        background: rgb(255, 255, 255);
                        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                        @include transition;
                        pointer-events: none;

                        @include phone {
                            display: none !important;
                        }
                    }

                    &.wpbs-scrolled-to-end {
                        &:after {
                            opacity: 0;
                        }
                    }

                    .wpbs-calendar-editor {
                        padding-right: 20px;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                    }
                }
            }
        }

        @include tablet {
            flex-basis: 100%;
            max-width: 100%;

            .wpbs-calendar-box {
                max-width: 380px;
                margin-left: auto;
                margin-right: auto;

                .wpbs-calendar {
                    margin: 0;
                    max-width: 100% !important;
                }
            }
        }

        .wpbs-tab-edit-dates {
            margin-bottom: -15px;
        }

        .wpbs-legend-item-icon-wrapper {
            border: 1px solid $wpbs_dark_border_color;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 36px;
            height: 36px;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
        }
    }
}



a.wpbs-inactive {
    color: $wpbs_lighter_text_color;
    cursor: not-allowed;
}








// Bookings Single Calendar

/******************************************************************************************/
/* Bookings
/******************************************************************************************/

.wpbs-wrap .wpbs-bookings-export {
    float: right;
}

#wpbs-bookings {
    &.wpbs-loading {
        opacity: 0.6;
        pointer-events: none;
    }

    &:after {
        content: "";
        display: block;
        clear: both;
    }

    .wpbs-bookings-header {
        float: right;

        @include tablet_landscape {
            float: none;
            margin-top: 6px;
        }
    }

    @include tablet_landscape {
        .subsubsub {
            float: none;
        }
    }

    .wpbs-booking-fields {
        clear: both;
        padding-top: 4px;
    }

    &.wpbs-bookings-javascript .wpbs-booking-field {
        display: none;
    }

    .wpbs-booking-field {
        margin: 0;
        background: #ffffff;
        border: 1px solid $wpbs_dark_border_color;
        box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
        border-radius: 6px;
        color: $wpbs_text_color;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        margin-top: 8px;

        @include tablet_landscape {
            white-space: initial;
        }

        &:hover {
            background-color: $wpbs_lighter_bg;
            @include transition;
        }

        .wpbs-booking-field-header {
            cursor: pointer;
            padding: 10px;
            position: relative;
            width: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .wpbs-booking-field-header-fixed-elements {
            display: inline-block;
        }

        .wpbs-booking-field-header {
            p {
                margin: 0;
                font-weight: 600;
                display: inline-block;
                margin-right: 15px;
                height: 26px;
                line-height: 26px;
                vertical-align: middle;

                @include phone {
                    line-height: 18px;

                    &.wpbs-booking-field-check-in-date,
                    &.wpbs-booking-field-check-out-date {
                        vertical-align: initial;
                        width: auto !important;
                    }

                    &.wpbs-booking-field-check-out-date {
                        margin-right: 0;

                    }
                }

                i {
                    margin-right: 5px;
                    font-size: 18px;
                    position: relative;
                    top: 3px;

                    @include phone {
                        font-size: 14px;
                        margin-right: 3px;
                    }
                }

                span.wpbs-booking-field-header-label {
                    font-weight: normal;
                }
            }

            a:focus {
                -webkit-box-shadow: none;
                box-shadow: none;
            }

            p.wpbs-booking-field-details {
                @include tablet_landscape {
                    display: block;
                    height: auto;
                    margin-right: 0;
                    margin-top: 6px;
                }

                span {
                    display: inline-block;
                    margin-right: 5px;
                    font-weight: normal;

                    &.wpbs-hidden {
                        display: none !important
                    }

                    @include tablet_landscape {
                        width: auto !important;
                        margin-right: 10px;
                    }
                }

                position: relative;
            }
        }
    }

    p {

        &.wpbs-bookings-no-results,
        &.wpbs-bookings-no-search-results {
            padding-bottom: 12px;
            margin: 0;
            display: none;

            @include tablet_landscape {
                padding-top: 12px;
            }
        }
    }

    .wpbs-booking-field {
        .wpbs-booking-field-header .wpbs-booking-field-booking-id {
            display: inline-block;
            font-size: 13px;
            text-decoration: none;
            vertical-align: middle;
            line-height: 30px;
            margin-right: 15px;
            border-radius: 4px;
            padding: 0 9px;
            color: #fff;
            font-weight: bold;
            color: #fff;
            text-align: center;

            @include phone {
                line-height: 26px;
                margin-right: 8px;
            }
        }

        .wpbs-booking-field-tags {
            position: absolute;
            right: 0;
            top: 0;
            background: #ffffff;
            height: 50px;
            padding: 10px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            z-index: 2;

            @include tablet_landscape {
                background-color: transparent;
            }

            @include phone {
                position: relative;
                right: auto;
                top: auto;
                height: auto;
                background-color: transparent;
                padding: 6px 0 0 0;
            }

            >div+div {
                margin-left: 8px;
            }

            &:after {
                content: "";
                position: absolute;
                right: 100%;
                top: 0;
                height: 100%;
                width: 60px;
                background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
                background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
                background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
                pointer-events: none;

                @include tablet_landscape {
                    display: none;
                }
            }
        }

        .wpbs-booking-field-header:after {
            content: "";
            display: block;
            clear: both;
        }
    }

    .tablenav-pages a:focus {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .wpbs-bookings-tab {
        display: none;

        &.active {
            display: block;
        }
    }

    .wpbs-bookings-tab-navigation {
        margin: 0;
        display: flex;

        li {
            display: inline-block;
            float: none;

            .separator {
                margin: 0 7px 0 2px;
                position: relative;
                top: -1px;
            }

            &:last-child {
                .separator {
                    display: none;
                }
            }

            @include phone {
                a {
                    font-size: 12px;
                }
            }
        }

        a {
            text-decoration: none;
            color: $wpbs_blue_text;
            padding-left: 0;

            &.current {
                color: $wpbs_text_color;
            }

            @include tablet_landscape_min {
                &:hover {
                    color: $wpbs_blue;
                }
            }
        }

        li {
            a:focus {
                -webkit-box-shadow: none;
                box-shadow: none;
            }

            span.dashicons {
                top: 3px;
                left: 0;
                position: relative;
            }

            &.pending span.dashicons {
                color: #ffa726;
            }

            &.accepted span.dashicons {
                color: #9ccc65;
            }

            &.cancelled span.dashicons {
                color: #3ba6e7;
            }

            &.trash span.dashicons {
                color: #ef5350;
            }
        }
    }

    &.wpbs-bookings-javascript .wpbs-bookings-pagination {
        display: none;
    }

    .wpbs-bookings-pagination {
        .displaying-num {
            margin-right: 7px !important;
            line-height: 29px;
        }

        .current-page {
            margin: 0 !important;
            line-height: 29px;
            vertical-align: bottom;
            padding: 0 1px;
            min-height: 0;
        }

        .tablenav-paging-text {
            margin: 0 6px 0 3px !important;

            @include phone {
                text-align: left;
                margin: 0 9px 0 0 !important;
            }
        }

        a {
            margin-right: 3px !important;
            -webkit-transition: none;
            -o-transition: none;
            transition: none;

            &.last-page {
                margin-right: 0 !important;
            }
        }
    }
}



// Add Calendar Shortcode
#wpbs-modal-add-calendar-shortcode {
    border: none;
    box-shadow: none;
    background-color: transparent;

    .wpbs-modal-close:not(.wpbs-secondary-button) {
        color: $wpbs_text_color;
        text-decoration: none;
        font-size: 24px;
        font-weight: normal;
        position: absolute;
        right: 20px;
        top: 50%;
        outline: none !important;
        transform: translate(0, -50%);
        cursor: pointer;

        &:hover {
            color: $wpbs_blue;
        }
    }

    .wpbs-tabs-nav .wpbs-tabs-menu {
        background-color: #fff;

        a:not(.wpbs-nav-tab-active) {
            background-color: #fff;

            &:active {
                background-color: #a3b5fd;

            }
        }
    }

    h2 {
        font-size: 20px;
        line-height: 150%;
        margin: 16px 0;
        color: $wpbs_text_color;
        font-weight: 500;

        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }

        .wpbs-heading-description {
            display: block;
            font-size: 12px !important;
            color: $wpbs_light_text_color !important;
            margin-top: 6px !important;
            line-height: 150%;
            font-weight: normal;
        }
    }

    h3 {
        margin: 12px 0 12px 0;
        font-size: 18px;
        line-height: 150%;
    }

    .wpbs-plugin-wrapper {
        padding: 0;
        background-color: transparent;
        height: 100%;

        .wpbs-tabs-wrapper {
            .wpbs-tab {
                margin-bottom: 0;
                padding: 0;
            }
        }

        .wpbs-tabs-nav .wpbs-tabs-menu {
            background-color: #fff;

            a:not(.wpbs-nav-tab-active) {
                background-color: #fff;

                &:active {
                    background-color: #a3b5fd;

                }
            }
        }

        .wpbs-box {
            border: none;
            background-color: $wpbs_lighter_bg;
            height: 100%;

            .wpbs-box-header {
                padding-top: 20px;
                padding-bottom: 20px;
                padding-right: 56px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;

                .wpbs-booking-buttons {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    a+a {
                        margin-left: 8px;
                    }
                }

                h1 {
                    margin: 0;
                }
            }

            .wpbs-modal-body {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                max-height: calc(100% - 61px);

                .wpbs-modal-inner {
                    flex: 1;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    padding: 20px;
                    max-height: calc(100% - 50px);
                }
            }

            .wpbs-box-footer-wrapper {
                width: 100%;

                .wpbs-box-footer {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }
        }
    }
}


/* Booking Details Modal */
#wpbs-booking-details-modal-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    z-index: 10000;
    overflow-y: scroll;
}

#wpbs-booking-details-modal-inner {
    position: relative;
    width: 1240px;
    margin: 100px auto;
    opacity: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    @media screen and (max-width: 1340px) {
        width: 100%;
        max-width: 1240px;
        margin: auto;
        padding: 64px 24px 24px 24px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .wpbs-legend-item-icon-wrapper {
        border: 1px solid $wpbs_dark_border_color;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 36px;
        height: 36px;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
    }

    .wpbs-box-header {
        h1 {
            a {
                @include tablet {
                    display: block;
                    margin-left: 0;
                    margin-top: 8px;
                }
            }
        }
    }

    .wpbs-box {
        flex-wrap: initial;
    }

    table+h2 {
        margin-top: 24px;
    }

    h2 {
        font-size: 20px;
        line-height: 150%;
        margin: 16px 0;
        color: $wpbs_text_color;
        font-weight: 500;

        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }

        .wpbs-heading-description {
            display: block;
            font-size: 12px !important;
            color: $wpbs_light_text_color !important;
            margin-top: 6px !important;
            line-height: 150%;
            font-weight: normal;
        }
    }

    h3 {
        margin: 12px 0 12px 0;
        font-size: 18px;
        line-height: 150%;
    }

    .wpbs-plugin-wrapper {
        padding: 0;
        background-color: transparent;

        .wpbs-tabs-wrapper {
            .wpbs-tab {
                margin-bottom: 0;
                padding: 0;
            }
        }

        .wpbs-tabs-nav .wpbs-tabs-menu {
            background-color: #fff;

            a:not(.wpbs-nav-tab-active) {
                background-color: #fff;

                &:active {
                    background-color: #a3b5fd;

                }
            }
        }

        .wpbs-box {
            border: none;

            .wpbs-box-header {
                padding-top: 20px;
                padding-bottom: 20px;
                padding-right: 56px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;

                @include phone {
                    display: block;

                    a.wpbs-inventory-header {
                        line-height: 16px;
                        padding-top: 6px;
                        padding-bottom: 6px;
                    }
                }

                .wpbs-booking-buttons {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    @include phone {
                        justify-content: flex-start;
                        margin-top: 8px;
                    }

                    a+a {
                        margin-left: 8px;
                    }
                }

                h1 {
                    margin: 0;
                }
            }

            .wpbs-box-footer-wrapper {
                width: 100%;

                .wpbs-box-footer {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    @include phone {
                        display: block;
                    }

                    .wpbs-buttons+button {
                        margin-top: 8px;
                    }
                }
            }
        }
    }

    h1 svg {
        max-width: 24px;
        position: relative;
        top: 3px;
    }

    #wpbs-booking-details-modal-close {
        color: $wpbs_text_color;
        text-decoration: none;
        font-size: 24px;
        font-weight: normal;
        position: absolute;
        right: 20px;
        top: 50%;
        outline: none !important;
        transform: translate(0, -50%);

        @include phone {
            transform: none;
            top: 20px;
        }

        &:hover {
            color: $wpbs_blue;
        }
    }

    h3 {
        &.wpbs-no-margin {
            margin-bottom: 0;
        }
    }

    .wpbs-tab {
        margin-top: 0px;
        margin-bottom: 15px;
        padding: 0 10px;

        &:after {
            content: '';
            display: table;
            clear: both;
        }
    }

    .wpbs-calendar-date-inventory,
    .wpbs-calendar-date-inventory-header,
    .wpbs-calendar-date-minimum_stay,
    .wpbs-calendar-date-minimum_stay-header,
    .wpbs-calendar-date-price,
    .wpbs-calendar-date-price-header {
        width: 80px;
    }

    .wpbs-tab {
        @include phone {

            &.wpbs-tab-contract,
            &.wpbs-tab-invoice {
                .wpbs-box-footer {
                    .wpbs-buttons {
                        .dashicons {
                            display: none;
                        }
                    }
                }
            }

            &.wpbs-tab-invoice {
                .wpbs-box-footer {
                    .wpbs-buttons {
                        justify-content: space-between;
                        flex-wrap: wrap;

                        >* {
                            flex-basis: calc(50% - 4px);
                            margin: 0 0 8px 0 !important;
                            -webkit-box-sizing: border-box;
                            -moz-box-sizing: border-box;
                            box-sizing: border-box;

                            &:last-child {
                                margin-bottom: 0 !important;
                            }
                        }

                        @include tiny {
                            display: block;

                            >* {
                                display: block;
                                width: 100%;
                                -webkit-box-sizing: border-box;
                                -moz-box-sizing: border-box;
                                box-sizing: border-box;
                                margin: 0 0 6px 0 !important;
                                text-align: center;

                                &:last-child {
                                    margin-bottom: 0 !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }


    .wpbs-cancellation-request-view {

        .wpbs-page-notice {
            margin-top: 24px;
        }

        .wpbs-cancellation-status {
            text-transform: capitalize;
            font-weight: bold;
        }

        .wpbs-cancellation-status-pending {
            color: #f3b628;
        }

        .wpbs-cancellation-status-approved {
            color: #09a74d;
        }

        .wpbs-cancellation-status-declined {
            color: #f00;
        }

        select#cancellation-request-status {
            width: auto;
        }

        .wpbs-edit-booking-details-field-view {
            display: flex;
        }

    }
}

/* Add Booking Modal */
#wpbs-empty-trash {
    display: none;
}

#wpbs-add-booking-modal-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    overflow-y: scroll;
    opacity: 0;
    display: none;
}

#wpbs-add-booking-modal-inner {
    position: relative;
    width: 1200px;
    margin: 100px auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;

    @media screen and (max-width: 1340px) {
        width: 100%;
        max-width: 1240px;
        margin: auto;
        padding: 64px 24px 24px 24px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #wpbs-add-booking {
        @include phone {
            padding-top: 0;
        }

        .wpbs-form-field {
            margin-bottom: 0;
        }

        .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=email],
        .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=number],
        .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=text],
        .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field select {
            min-height: 1px;
        }
    }

    .wpbs-box-header {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;

        @include phone {
            display: block;

            #wpbs-add-booking-edit-options {
                margin-top: 8px;
            }
        }

        .wpbs-booking-buttons {
            display: flex;
            align-items: center;
            justify-content: space-between;

            a+a {
                margin-left: 8px;
            }
        }

        h1 {
            margin: 0;
            display: flex !important;
            align-items: center !important;
            flex: 1;

            @include phone {
                font-size: 20px;
                line-height: 28px;
            }

            svg {
                margin: -8px 8px -8px 0;
                display: inline-block;
                vertical-align: middle;
                position: relative;
                top: -1px;
                height: 24px;

                @include phone {
                    height: 20px;
                }
            }
        }
    }

    #wpbs-add-booking-modal-close {
        color: $wpbs_text_color;
        text-decoration: none;
        font-size: 24px;
        font-weight: normal;
        position: absolute;
        right: 20px;
        top: 50%;
        outline: none !important;
        transform: translate(0, -50%);

        @include phone {
            top: 20px;
            transform: none;
        }

        &:hover {
            color: $wpbs_blue;
        }
    }

    .wpbs-plugin-wrapper {
        padding: 0;
        background-color: transparent;
    }

    h1 {
        display: block !important;
        font-weight: 600;
        font-size: 2em;
        position: relative;
        margin: 0;

        button {
            position: absolute;
            top: 4px;
            margin-left: 15px;
        }

        svg {
            max-width: 24px;
            position: relative;
            top: 3px;
        }
    }

    h2 {
        font-size: 1.6em;
        margin: 0;
        padding: 0.1em 0 1em 0;
    }

    .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field button.wpbs-coupon-code-button svg {
        width: 24px !important;
        height: 24px !important;
    }

    form {
        padding-bottom: 15px;
    }

    .wpbs-add-booking-options form {
        display: block;
    }
}



#wpbs-add-booking {
    position: relative;
    padding: 20px 0;

    .wpbs-container .wpbs-calendars .wpbs-calendar {
        border: 1px solid #f1f1f1;

        .wpbs-calendar-header {
            padding: 8px;
            background: #f5f5f5;
        }

        .wpbs-calendar-wrapper {
            padding: 8px 7px 7px 7px;
        }
    }

    .wpbs-legend-item-icon[data-type="single"] svg {
        display: block;
    }

    .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field select {
        max-width: 100%;
    }

    .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-select-container select {
        min-height: 26px;
        line-height: 24px;
    }

    .wpbs-pricing-table:not(.wpbs-part-payment-applicable) .wpbs-line-item-part-payments {
        display: none !important;
    }
}

#wpbs-booking-details-modal-inner {
    .wpbs-nav-tab svg {
        height: 16px;
        margin-right: 7px;
        margin: -3px 7px -3px 0;
    }

    .wpbs-booking-details-main,
    .wpbs-booking-details-modal-booking-details {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;

        @include tablet {
            display: block;
        }

        .wpbs-clear {
            flex-basis: 100%;
        }

        >h2 {
            flex-basis: 100%;
        }
    }

    @include tablet {
        .wpbs-booking-details-main {
            display: block;
        }
    }

    .wpbs-booking-view-customer-details-button {
        margin-top: 10px;
    }

    .wpbs-booking-details-modal-column-left {
        flex: 1;
        margin-right: 25px;
        padding-right: 25px;
        position: relative;

        @include tablet {
            padding-right: 0;
            margin-right: 0;
            border-bottom: 1px solid $wpbs_border_color;
            padding-bottom: 24px;
            margin-bottom: 24px;
        }

        @include phone {
            .wpbs-calendar-editor {
                .wpbs-calendar-date {
                    &:nth-child(2) {
                        margin-top: 0;
                    }

                    &+.wpbs-calendar-date {
                        margin-top: 16px;
                    }

                    >div {
                        flex-basis: 100%;
                        margin-left: 0;
                        margin-right: 0;

                        input {
                            min-height: 1px;
                        }

                        .dashicons {
                            transform: translate(0, -50%);
                        }
                    }

                    .wpbs-calendar-date-legend-item {
                        margin-top: 0;
                    }

                    .wpbs-calendar-date-description,
                    .wpbs-calendar-date-tooltip {
                        flex-basis: calc(50% - 4px);
                    }

                    .wpbs-calendar-date-description {
                        margin-right: 8px;
                    }
                }
            }
        }

        &.wpbs-booking-details-modal-column-half {
            flex-basis: 50%;
            max-width: 50%;
            padding-right: 25px;
            margin-right: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-bottom: 0;
            margin-bottom: 0;
            border: none;

            @include tablet {
                padding-right: 0;
                max-width: 100%;
            }
        }

        &:after {
            content: "";
            display: block;
            position: absolute;
            right: 0;
            top: 46px;
            height: calc(100% - 46px);
            width: 1px;
            background-color: $wpbs_border_color;

            @include tablet {
                display: none;
            }
        }

    }

    .wpbs-calendar-date-legend-item,
    .wpbs-calendar-date-legend-item-header,
    .wpbs-calendar-date-description,
    .wpbs-calendar-date-tooltip {
        flex: 1;
    }

    .wpbs-booking-details-modal-accept-booking-email {
        margin-top: 24px;

        label+label {
            margin-left: 5px;
        }

        .wpbs-booking-details-modal-email-wrapper {
            display: none;

        }

        .wpbs-booking-details-modal-email-wrapper-show {
            display: block;

        }

    }
}

@media screen and (max-width: 1240px) {
    #wpbs-booking-details-modal-inner .wpbs-nav-tab svg {
        display: none;
    }
}

#wpbs-booking-details-modal-inner {

    .wpbs-secondary-button,
    .wpbs-primary-button {
        &+.wpbs-page-notice {
            margin-top: 24px;
        }
    }

    .wpbs-booking-details-modal-column-right {
        flex-basis: 320px;
        max-width: 320px;
        width: auto;
        top: 60px;
        position: sticky;

        @include tablet_landscape {
            max-width: 260px;
            flex-basis: 260px;
        }

        @include tablet {
            max-width: 100%;
        }

        &.wpbs-booking-details-modal-column-half {
            flex-basis: 50%;
            max-width: 50%;
            padding-left: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            @include tablet {
                max-width: 100%;
                padding-left: 0;
                margin-top: 24px;
            }
        }
    }

    @include phone {
        .wpbs-tab-email-logs {
            position: relative;

            .wpbs-has-scrollbar {
                overflow: auto;

                &:after {
                    content: "";
                    position: absolute;
                    right: 0px;
                    top: 20px;
                    width: 150px;
                    height: calc(100% - 20px);
                    z-index: 1;
                    background: rgb(255, 255, 255);
                    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
                    @include transition;
                    pointer-events: none;
                }

                &.wpbs-scrolled-to-end {
                    &:after {
                        opacity: 0;
                    }
                }
            }

            table {
                min-width: 600px;
            }
        }

        .wpbs-tab-sms {
            position: relative;

            .wpbs-has-scrollbar {
                overflow: auto;

                &:after {
                    content: "";
                    position: absolute;
                    right: 0px;
                    top: 20px;
                    width: 150px;
                    height: calc(100% - 20px);
                    z-index: 1;
                    background: rgb(255, 255, 255);
                    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
                    @include transition;
                    pointer-events: none;
                }

                &.wpbs-scrolled-to-end {
                    &:after {
                        opacity: 0;
                    }
                }
            }

            table {
                min-width: 600px;
            }
        }
    }

    .wpbs-booking-details-modal-booking-details,
    .wpbs-tab-email-logs,
    .wpbs-tab-sms {
        table {
            border-collapse: collapse;
            width: 100%;
            background-color: #fff;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            border: 1px solid $wpbs_border_color;
            border-radius: 6px;
            overflow: hidden;
            display: block;

            a:not(.wpbs-secondary-button):not(.wpbs-primary-button) {
                color: $wpbs_blue_text;

                @include tablet_landscape_min {
                    &:hover {
                        color: $wpbs_blue;
                        text-decoration: none;
                    }
                }
            }

            th {
                font-weight: 500;
            }

            tr td {
                vertical-align: middle;

                @include phone {
                    word-break: break-word !important;
                }

                &:first-child {
                    @include phone {
                        max-width: calc((100vw - 48px - 32px - 2px)/2);
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                    }
                }

                hr {
                    border: 1px solid #e5e5e5;
                    border-bottom: none;
                    position: relative;
                    width: calc(100% + 20px);
                    left: -10px;
                }
            }

            input:not(.ed_button),
            select:not(.ui-datepicker-month),
            textarea:not(.wp-editor-area) {
                flex: 1;
                width: 100%;
                max-width: 100%;
                border: 1px solid $wpbs_dark_border_color;
                box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
                border-radius: 6px;
                height: 36px;
                line-height: 36px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                margin: 0;
                min-height: 1px;

                &+.wpbs-primary-button,
                &+.wpbs-secondary-button {
                    margin-left: 8px;
                }

                &:hover {
                    @include input_hover;
                }

                &:focus {
                    @include input_focus;
                }

                &.wpbs-small-input {
                    max-width: 110px;
                    vertical-align: text-top;
                }
            }

            input {
                padding: 0 12px;

                &[type="number"] {
                    padding-right: 0;
                }

                &.hasDatepicker {
                    background-color: #fff !important;
                }
            }

            textarea {
                padding: 8px 12px;
                min-height: 90px;
                line-height: 130% !important;
            }

            select {
                padding: 0 26px 0 12px;
                line-height: 34px !important;
            }

            tr {

                td,
                th {
                    &:first-child {
                        border-left: none;
                    }
                }

                td,
                th {
                    &:last-child {
                        border-right: none;
                    }
                }

                &:first-child {

                    td,
                    th {
                        border-top: none;
                    }
                }

                &:last-child {

                    td,
                    th {
                        border-bottom: none;
                    }
                }
            }

            td {
                border: 1px solid $wpbs_border_color;
                line-height: 20px;
                padding: 10px;
                vertical-align: top;

                &.no-label {
                    color: $wpbs_lighter_text_color !important;

                    * {
                        color: $wpbs_lighter_text_color !important;
                        font-weight: normal;
                    }
                }

                &:first-child {
                    width: 1%;

                    strong {
                        display: block;
                        white-space: nowrap;
                        max-width: 200px;
                        overflow: hidden;
                        -o-text-overflow: ellipsis;
                        text-overflow: ellipsis;
                    }
                }

                p {
                    display: block;
                    width: 100%;
                    margin: 0;
                }
            }
        }
    }

    .wpbs-tab-email-logs table {
        border-collapse: collapse;
        width: 100%;
        margin-top: 20px;

        th,
        td {
            border: 1px solid #ddd;
            line-height: 20px;
            padding: 10px;
            vertical-align: top;
            text-align: left;
            width: 500px !important;
        }

        .email-log-table-message {
            width: 200px !important;
        }

        .email-log-table-actions {
            width: 160px !important;
        }
    }

    .wpbs-tab-sms table {

        th,
        td {
            width: 500px !important;
        }
    }

    .wpbs-booking-details-modal-email-customer-inner {
        display: inline-block;
    }


    .wpbs-remove-scheduled-action {
        color: #bbb !important;
        float: right;

        @include phone {
            float: none;
            display: block;
        }

        &:hover {
            color: #f00 !important;
        }
    }

    .wpbs-booking-details-modal-footer-actions {
        hr {
            border: none;
            border-top: 1px solid #ccc;
            padding-bottom: 10px;
        }

        .wpbs-tooltip-wrapper {
            top: 6px;
        }

        button.wpbs-move-booking {
            float: right;
        }
    }
}

.wpbs-booking-details-modal-move-booking {
    display: none;
}

#wpbs-booking-details-modal-inner {
    .wpbs-tab.wpbs-tab-manage-booking {
        margin-bottom: 0;

        .wpbs-calendar-editor input {
            padding-right: 0;
        }
    }

    tr {
        &.wpbs-booking-details-order-status td:nth-child(2) {
            font-weight: bold;
        }

        &.wpbs-booking-details-order-status-error td:nth-child(2),
        &.wpbs-booking-details-order-status-cancelled td:nth-child(2) {
            color: #f00;
        }

        &.wpbs-booking-details-order-status-completed td:nth-child(2) {
            color: #09a74d;
        }

        &.wpbs-booking-details-order-status-authorized td:nth-child(2),
        &.wpbs-booking-details-order-status-pending td:nth-child(2) {
            color: #f3b628;
        }

        &.wpbs-booking-details-amount-received td:nth-child(2),
        &.wpbs-booking-details-total td:nth-child(2) {
            font-weight: bold;
        }
    }

    .wpbs-booking-details-modal-email-customer-inner .wpbs-settings-field-translations .wpbs-settings-field-wrapper.wpbs-settings-field-inline.wpbs-settings-field-large {
        padding-left: 56px;

        .wpbs-settings-field-label {
            width: 50px;
        }
    }

    label[for="booking_email_accept_booking_enable"] {
        position: relative;
        top: -2px;
    }

    .wpbs-booking-details-modal-accept-booking-email .wpbs-settings-field-translations .wpbs-settings-field-wrapper.wpbs-settings-field-inline.wpbs-settings-field-large {
        padding-left: 56px;
        margin-left: 180px;
        max-width: calc(100% - 236px);

        .wpbs-settings-field-label {
            width: 50px;
        }
    }

    .wpbs-tab-payment-details .wpbs-order-information-payment-actions a {
        float: right;
        font-weight: normal;

        @include phone {
            float: none;
            display: inline-block;
        }

        &.wpbs-payment-status-unpaid {
            color: #ccc !important;
        }
    }

    .wpbs-booking-details-modal-note {
        border: 1px solid $wpbs_dark_border_color;
        box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
        border-radius: 6px;
        background-color: #fff;
        overflow: hidden;

        &+.wpbs-booking-details-modal-note {
            margin-top: 24px;
        }

        .wpbs-booking-details-modal-note-body {
            padding: 5px 15px;

            p {
                margin: 10px 0;
            }
        }

        .wpbs-booking-details-modal-note-footer {
            border-top: 1px solid $wpbs_dark_border_color;
            padding: 6px 15px;
            background: $wpbs_lighter_bg;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;

            p {
                color: $wpbs_light_text_color;
                margin: 0;
            }

            a {
                color: $wpbs_red;
                text-decoration: none;
                font-size: 18px;

                &:hover {
                    color: darken($wpbs_red, 10%);
                }
            }
        }
    }

    .wpbs-booking-details-modal-notes-add-new textarea {
        display: block;
    }

    .wpbs-booking-modal-notes-count {
        display: inline-block;
        vertical-align: middle;
        min-width: 18px;
        height: 18px;
        line-height: 1.6;
        font-size: 11px;
        text-align: center;
        border-radius: 50%;
        background-color: $wpbs_blue;
        color: #ffffff;
        font-weight: 500;
        margin: -3px 0 -3px 4px;
        padding: 0 5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        top: -2px;
    }

    .wpbs-nav-tab-active {
        .wpbs-booking-modal-notes-count {
            background-color: #fff;
            color: $wpbs_blue;
        }
    }
}

#wpbs-placeholder-editor {
    display: none;
}

.wpbs-bookings-count-wrap {
    display: inline-block;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1px 0 -1px 2px;
    padding: 0 5px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background-color: #ca4a1f;
    color: #fff;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
    z-index: 26;
}

.wpbs-bookings-count {
    color: #fff;
}

a .wpbs-admin-bar-bookings-count {
    display: inline-block;
    vertical-align: top;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    margin: 1px 3px -1px 2px !important;
    padding: 0 5px !important;
    min-width: 18px;
    height: 18px !important;
    border-radius: 9px !important;
    background-color: #ca4a1f;
    color: #fff;
    top: 6px;
    font-size: 11px !important;
    line-height: 1.6 !important;
    text-align: center;
    z-index: 26;
    position: relative !important;
}

.wpbs-sub-tabs .wpbs-tab {
    display: none;

    &.wpbs-section-active {
        display: block;
    }
}

.wpbs-tab {
    .wpbs-form-tab-navigation {
        margin-bottom: 15px;

        a:focus {
            -webkit-box-shadow: none;
            box-shadow: none;
        }
    }

    .wpbs-form-sections .wpbs-form-section {
        display: none;

        &.wpbs-section-active {
            display: block;
        }
    }

    &.wpbs-tab-form-strings {
        padding-top: 8px;
    }
}

#fancy_emails_logo_height {
    width: 103px;
}



#wpadminbar ul#wp-admin-bar-root-default #wp-admin-bar-wp-booking-system-admin-bar {
    a .ab-icon:before {
        content: "\f508";
        top: 3px;
    }

    ul li a span {
        top: 3px;
    }
}

/* Edit Booking Details */

.wpbs-edit-booking-details {
    .wpbs-edit-booking-details-field-edit {
        display: none;

        input {
            width: 100%;
            font-weight: normal;

            &[type="number"] {
                padding: 0 0 0 8px;
                line-height: 30px;
            }
        }

        textarea {
            width: 100%;
            height: 80px;
        }
    }

    .edit-booking-details-open {
        margin-top: 10px;
    }

    .edit-booking-details-save,
    .edit-booking-details-cancel {
        display: none;
        margin-top: 10px;
    }
}

.wpbs-wrap input.current-page {
    padding: 0;
}

#wpbs-booking-details-modal-inner .wpbs-nav-tab-wrapper.nav-tab-wrapper a {
    &.nav-tab-active {
        background-color: #fff;
        border-bottom-color: #ffffff;
    }

    &[data-tab="sms"] {
        &:not(.nav-tab-active) svg path {
            fill: #50575e !important;
        }

        &:hover svg path {
            fill: #000 !important;
        }
    }
}





// Calendar Editor
/* Calendar */

/* Legend */

.wpbs-legend-item {
    margin-bottom: 10px;

    .wpbs-legend-item-icon {
        margin-right: 5px;
    }

    .wpbs-legend-item-name {
        display: inline-block;
        vertical-align: middle;
    }
}

/* Calendar Editor */
#wpbs-calendar-events {
    position: relative;
}

.wpbs-wrap-edit-calendar .wpbs-calendar-editor {
    opacity: 0;

    .wpbs-date-inner {
        line-height: 22px;
        font-size: 14px;
    }
}

.wpbs-booking-details-modal-column .wpbs-calendar-editor .wpbs-date-inner {
    line-height: 22px;
    font-size: 14px;
}

.wpbs-wrap-edit-calendar .wpbs-calendar-editor .wpbs-date-inner small,
.wpbs-booking-details-modal-column .wpbs-calendar-editor .wpbs-date-inner small {
    display: block;
    text-transform: uppercase;
    font-size: 8px;
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: -11px;
}

.wpbs-calendar-editor .wpbs-calendar-date {
    display: flex;
    flex-wrap: wrap;

    &+.wpbs-calendar-date {
        margin-top: 4px;
    }

    .wpbs-calendar-date-description,
    .wpbs-calendar-date-tooltip {
        flex: 1;
    }

    @include phone {
        .wpbs-calendar-date-description {
            margin-right: 8px !important;
        }
    }
}

.wpbs-wrap-edit-calendar {
    .wpbs-ical-changeover {
        .wpbs-legend-item-icon:after {
            content: "";
            display: block;
            width: 200%;
            height: 4px;
            position: relative;
            z-index: 1;
            -webkit-transform: rotate(-45deg) translate(-50%, -50%);
            -ms-transform: rotate(-45deg) translate(-50%, -50%);
            transform: rotate(-45deg) translate(-50%, -50%);
            -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
            left: 50% !important;
            top: 50% !important;
            right: auto !important;
            bottom: auto !important;
        }

        .wpbs-date-inner {
            z-index: 2;
        }
    }

    .wpbs-calendar .wpbs-ical-changeover .wpbs-legend-item-icon:after {
        right: 16px;
    }
}

.wpbs-calendar-date-legend-item {
    position: relative;
    display: inline-block;
    width: 180px;
    padding-left: 40px;
    margin-right: 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    @include phone {
        width: 100%;
        margin-right: 0;
    }
}

.wpbs-calendar-date-legend-item-header {
    position: relative;
    display: inline-block;
    width: 180px;
    padding-left: 42px;
    margin-right: 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 0;
}

.wpbs-calendar-date-legend-item {

    .wpbs-legend-item-icon-wrapper,
    .wpbs-legend-item-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .wpbs-date-inner {
        position: relative;
        z-index: 2;
        line-height: 34px;
        width: 100%;
        text-align: center;
        position: relative;
        top: 2px;
    }
}

.wpbs-calendar-date-description-ical {
    position: relative;
    display: flex;
    flex: 1;
}

.wpbs-ical-event-allow-tooltip .wpbs-calendar-date-description-ical {
    margin-right: 7px;
}

.wpbs-calendar-date-description,
.wpbs-calendar-date-tooltip,
.wpbs-calendar-date-description-header,
.wpbs-calendar-date-price-header,
.wpbs-calendar-date-inventory-header,
.wpbs-calendar-date-minimum_stay-header,
.wpbs-calendar-date-tooltip-header {
    position: relative;
    display: inline-block;
}

.wpbs-calendar-date-description-header,
.wpbs-calendar-date-tooltip-header {
    flex: 1;
}

.wpbs-calendar-date-description-ical .dashicons,
.wpbs-calendar-date-description .dashicons,
.wpbs-calendar-date-tooltip .dashicons,
.wpbs-calendar-date-inventory .dashicons,
.wpbs-calendar-date-minimum_stay .dashicons,
.wpbs-calendar-date-price .dashicons {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translate(0, -50%);
    color: $wpbs_border_color;

    @include phone {
        transform: none;
    }
}



.wpbs-calendar-date-description,
.wpbs-calendar-date-description-header {
    margin-right: 7px;
}

.wpbs-calendar-date-legend-item-header,
.wpbs-calendar-date-booking-ids-header,
.wpbs-calendar-date-description-header,
.wpbs-calendar-date-price-header,
.wpbs-calendar-date-inventory-header,
.wpbs-calendar-date-minimum_stay-header,
.wpbs-calendar-date-tooltip-header {
    margin-bottom: 7px;
    font-weight: bold;
}

.wpbs-calendar-date-inventory,
.wpbs-calendar-date-minimum_stay,
.wpbs-calendar-date-inventory-header,
.wpbs-calendar-date-minimum_stay-header,
.wpbs-calendar-date-price,
.wpbs-calendar-date-price-header {
    position: relative;
    display: inline-block;
    min-width: 0;
    margin-right: 6px;
    width: 85px;
}

.wpbs-calendar-date-booking-ids,
.wpbs-calendar-date-booking-ids-header {
    position: relative;
    display: inline-block;
    min-width: 0;
    margin-right: 6px;
}

.wpbs-calendar-date input,
.wpbs-calendar-date select {
    flex: 1;
    width: 100%;
    max-width: 100%;
    border: 1px solid $wpbs_dark_border_color;
    box-shadow: 0px 1px 2px rgba(32, 35, 39, .1) !important;
    border-radius: 6px;
    height: 36px;
    line-height: 36px;
    min-height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0 12px 0 30px !important;

    &::placeholder {
        color: $wpbs_border_color;
    }

    &+.wpbs-primary-button,
    &+.wpbs-secondary-button {
        margin-left: 8px;
    }

    &:not(:disabled):hover,
    &:not(:read-only):hover {
        @include input_hover;
    }

    &:not(:disabled):focus,
    &:not(:read-only):focus {
        @include input_focus;
    }

    &:disabled {
        cursor: default !important;
        border-color: $wpbs_dark_border_color !important;
        background-color: $wpbs_light_bg !important;
        color: rgba($wpbs_text_color, 0.5) !important;
        opacity: 1 !important;
    }

    &:disabled:focus,
    &:disabled:hover {
        outline: none !important;
        border-color: $wpbs_border_color;
    }


    &[type="number"] {
        padding-right: 0 !important;
    }
}

.wpbs-calendar-date select {
    padding: 0 26px 0 12px !important;
    line-height: 34px !important;
}

.wpbs-calendar-date {
    .wpbs-calendar-date-description-ical {
        .dashicons {
            &:before {
                color: rgba($wpbs_text_color, 0.5) !important;
            }
        }
    }
}

.wpbs-calendar-date input {

    &:not(:disabled):hover,
    &:not(:read-only):hover {
        @include input_hover;
    }

    &:not(:disabled):focus,
    &:not(:read-only):focus {
        @include input_focus;
    }

    &:disabled,
    &:read-only {
        cursor: default !important;
        border-color: $wpbs_dark_border_color !important;
        background-color: $wpbs_light_bg !important;
        color: rgba($wpbs_text_color, 0.5) !important;
        opacity: 1 !important;

        &:before {}
    }

    &:disabled:focus,
    &:disabled:hover,
    &:read-only:focus,
    &:read-only:hover {
        outline: none !important;
        border-color: $wpbs_border_color;
    }
}





// Booking IDs
.wpbs-calendar-date-booking-ids {
    font-size: 0;
    vertical-align: middle;

    .wpbs-calendar-date-booking-id {
        display: inline-block;
        position: relative;
        overflow: hidden;
        font-size: 13px;
        text-decoration: none;
        vertical-align: middle;
        line-height: 34px;
        margin-right: 4px;
        border-radius: 6px;
        padding: 1px 10px;
        color: #fff;
        font-weight: bold;
        color: #fff;
        @include transition;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        @include phone {
            line-height: 30px;
        }

        &.wpbs-extra-bookings-hidden {
            display: none !important;
        }

    }


    a.wpbs-calendar-date-booking-id {

        &:hover,
        &.hover {
            background-color: #333;
        }
    }

    .wpbs-calendar-date-booking-id:last-child {
        margin-right: 0;
    }
}

.wpbs-booking-color-0 {
    background-color: #FCC6D8 !important;
    color: #ff4380 !important;

    &.hover {
        background-color: #ff4380 !important;
        color: #fff !important;
    }
}

.wpbs-booking-color-1 {
    background-color: #DFBEE8 !important;
    color: #9b27b0 !important;

    &.hover {
        background-color: #9b27b0 !important;
        color: #fff !important;
    }
}

.wpbs-booking-color-2 {
    background-color: #C4E5FD !important;
    color: #02a8f4 !important;

    &.hover {
        background-color: #02a8f4 !important;
        color: #fff !important;
    }
}

.wpbs-booking-color-3 {
    background-color: #FDDFB2 !important;
    color: #ff9700 !important;

    &.hover {
        background-color: #ff9700 !important;
        color: #fff !important;
    }
}

.wpbs-booking-color-4 {
    background-color: #C0DFDB !important;
    color: #019587 !important;

    &.hover {
        background-color: #019587 !important;
        color: #fff !important;
    }
}

.wpbs-booking-color-5 {
    background-color: #D0C4EA !important;
    color: #663ab6 !important;

    &.hover {
        background-color: #663ab6 !important;
        color: #fff !important;
    }
}

.wpbs-booking-color-6 {
    background-color: #CDE7C8 !important;
    color: #4baf4f !important;

    &.hover {
        background-color: #4baf4f !important;
        color: #fff !important;
    }
}

.wpbs-booking-color-7 {
    background-color: #C6CAE9 !important;
    color: #3e50b4 !important;

    &.hover {
        background-color: #3e50b4 !important;
        color: #fff !important;
    }
}

.wpbs-booking-color-8 {
    background-color: #FDECB2 !important;
    color: #d9a404 !important;

    &.hover {
        background-color: #d9a404 !important;
        color: #fff !important;
    }
}

.wpbs-booking-color-9 {
    background-color: #D5CBC7 !important;
    color: #785446 !important;

    &.hover {
        background-color: #785446 !important;
        color: #fff !important;
    }
}

.wpbs-booking-color-10 {
    background-color: #f5f5f5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.wpbs-booking-color-status-pending {
    background-color: #ccc !important;
    color: #fff !important;

    &.hover {
        background-color: #aaa !important;
        color: #fff !important;
    }
}

#wpbs-bookings-tab-pending .wpbs-booking-field-booking-id {
    background: #ccc;
}

.wpbs-calendar-date-booking-ids .wpbs-booking-color-status-hidden {
    background: #eee !important;
    color: #999 !important;
    cursor: default;

    &:hover {
        background: #eee !important;
        color: #999 !important;
        cursor: default;
    }
}







// Calendar Notes
#wpbs-ical-file-import {
    .wpbs-box-content {
        >p:first-child {
            margin-top: 0;
        }
    }
}

.wpbs-calendar-notes {
    &.wpbs-ical-feeds-calendar {
        >p:first-child {
            margin-top: 0;
        }

        &.disabled {
            .wpbs-ical-feed-calendar-inner {
                opacity: 0.5;

                .text {
                    opacity: 1;
                }

                .wpbs-secondary-button {
                    pointer-events: none;
                }
            }
        }

        .wpbs-calendar-note {
            &+.wpbs-form-field {
                margin-top: 24px;
            }
        }
    }

    .wpbs-calendar-note {
        border: 1px solid $wpbs_dark_border_color;
        box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
        border-radius: 6px;
        background-color: #fff;
        overflow: hidden;

        &+.wpbs-calendar-note {
            margin-top: 24px;
        }

        .wpbs-ical-feed-calendar-inner {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            padding-top: 10px;
            position: relative;

            .text {
                flex: 1;
                overflow: hidden;
                max-width: calc(100% - 140px);

                strong {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    display: inline-block;
                    vertical-align: middle;
                    max-width: calc(100% - 40px);
                }

                p {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }

            p {
                color: $wpbs_lighter_text_color;
            }

            &.wpbs-ical-feed-calendar-inner-disabled {
                .text {
                    opacity: 0.5;
                }
            }

            .wpbs-legend-item-icon {
                margin-right: 6px;
                border-radius: 6px;
                border: 1px solid $wpbs_border_color;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            .wpbs-buttons {
                margin-top: -10px;
                width: 140px;
                justify-content: flex-end;
            }
        }
    }

    .wpbs-calendar-note-body {
        padding: 5px 15px;

        p {
            margin: 10px 0;
        }
    }

    .wpbs-calendar-note-footer {
        border-top: 1px solid $wpbs_dark_border_color;
        padding: 6px 15px;
        background: $wpbs_lighter_bg;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;

        p {
            color: $wpbs_light_text_color;
            margin: 0;
        }

        a {
            color: $wpbs_red;
            text-decoration: none;
            font-size: 18px;

            &:hover {
                color: darken($wpbs_red, 10%);
            }
        }
    }
}

.wpbs-calendar-new-note {
    h4 {
        margin-bottom: 5px;
        margin-top: 0;
        font-size: 1.1em;
    }

    textarea {
        width: 100%;
        padding: 10px;
        height: 100px;
        border: 1px solid #ccd0d4;
    }
}



@media print {

    .wpbs-booking-details-refund-row,
    .wpbs-booking-modal-security-deposit-actions {
        display: none;
    }

    .wpbs-booking-print,
    .wpbs-booking-download-csv {
        display: none !important;
    }

    #wpbs-booking-details-modal-overlay {
        background: #fff;
        overflow: visible !important;
        position: static !important;
    }

    #wpbs-booking-details-modal-inner {
        width: 100%;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;

        .wpbs-tabs-nav {
            display: none;
        }
    }

    .wpbs-booking-view-customer-details-button {
        display: none;
    }

    body[class*="wp-booking-system_"] #wpwrap {
        display: none;
    }

    .wpbs-box {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0px !important;
        background-color: transparent !important;
        display: block !important;
    }

    .wpbs-box-header {
        border: none !important;
        background-color: transparent !important;
        padding: 0 !important;
    }

    .wpbs-box-content {
        padding: 0 !important;
    }

    .wpbs-box-content h2 {
        padding-top: 20px !important;
    }

    #wpbs-booking-details-modal-inner .wpbs-booking-details-main,
    #wpbs-booking-details-modal-inner .wpbs-booking-details-modal-booking-details {
        display: block !important;
    }

    #wpbs-booking-details-modal-inner .wpbs-booking-details-modal-column-left.wpbs-booking-details-modal-column-half,
    #wpbs-booking-details-modal-inner .wpbs-booking-details-modal-column-right.wpbs-booking-details-modal-column-half {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        border: none !important;
    }

    #wpbs-booking-details-modal-inner .wpbs-booking-details-modal-booking-details table,
    #wpbs-booking-details-modal-inner .wpbs-tab-email-logs table,
    #wpbs-booking-details-modal-inner .wpbs-tab-sms table {
        box-shadow: none !important;
        border: none !important;
        border-collapse: collapse !important;
        border-radius: 0px !important;
        overflow: visible !important;
        max-width: calc(100% - 2px) !important;
    }

    #wpbs-booking-details-modal-inner .wpbs-booking-details-modal-booking-details table tr td,
    #wpbs-booking-details-modal-inner .wpbs-tab-email-logs table tr td,
    #wpbs-booking-details-modal-inner .wpbs-tab-sms table tr td,
    #wpbs-booking-details-modal-inner .wpbs-booking-details-modal-booking-details table tr td:last-child,
    #wpbs-booking-details-modal-inner .wpbs-tab-email-logs table tr td:last-child,
    #wpbs-booking-details-modal-inner .wpbs-tab-sms table tr td:last-child,
    #wpbs-booking-details-modal-inner .wpbs-booking-details-modal-booking-details table th,
    #wpbs-booking-details-modal-inner .wpbs-tab-email-logs table th,
    #wpbs-booking-details-modal-inner .wpbs-tab-sms table th {
        border: 1px solid #c4c4c4 !important;
        border-radius: 0px !important;
    }

    #wpbs-booking-details-modal-inner {
        .wpbs-tab {
            display: none;
            padding: 0;
        }

        h1 {
            margin-top: 0;
        }

        #wpbs-booking-details-modal-close {
            display: none;
        }
    }

    .wpbs-booking-details-modal-column {
        page-break-inside: avoid;
    }

    #wpbs-booking-details-modal-inner {
        .wpbs-tab {
            &[data-tab="booking-details"] {
                display: block;
            }

            &[data-tab="payment-details"] {
                display: block;
                margin: 0;
            }
        }

        .wpbs-booking-details-modal-booking-details {
            .wpbs-booking-details-modal-column {
                width: 100%;
                float: none;
                margin: 0;
                padding-top: 5px;
            }

            table td {
                padding: 5px;
            }
        }

        button,
        .wpbs-booking-details-modal-notes,
        .wpbs-tooltip-wrapper,
        .wpbs-booking-details-invoice,
        .wpbs-booking-details-contract,
        .wpbs-payment-change-status {
            display: none;
        }
    }
}




// Media Queries
@include desktop_small {
    #wpbs-ical-url-import {
        .wpbs-box-header.wpbs-has-buttons {
            display: block;

            .wpbs-buttons {
                margin-top: 6px;
            }
        }
    }
}

@include tablet_landscape {
    body.wp-booking-system_page_wpbs-calendars {
        .wpbs-plugin-wrapper {
            .wpbs-box.wpbs-box-half {
                width: 100%;
                max-width: 100%;
                flex-basis: 100%;
            }
        }
    }
}



@media screen and (max-width: 1070px) {
    body[class*="wp-booking-system_page"] {

        .wpbs-box-table-wrapper .tablenav.top .wpbs-bm-tablenav-filters .wpbs-bm-export-button {
            margin-left: 0 !important;
            margin-right: auto !important;
            margin-top: 10px !important;
            float: none;
        }
    }
}

@media screen and (max-width: 782px) {
    body[class*="wp-booking-system_page"] {

        input,
        textarea,
        select {
            font-size: 14px;

            &[multiple] {
                background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
                background-size: 16px 16px;
            }
        }

        .form-table select,
        select {
            min-height: 1px;
        }

        .subsubsub {
            font-size: 13px;
        }


        .wpbs-bm-select-container select {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

        .wpbs-logic-rules .wpbs-logic-rule {
            padding-right: 100px;

            @media screen and (max-width: 600px) {
                justify-content: flex-end;

                input,
                textarea,
                select {
                    flex-basis: 100% !important;
                    max-width: 100% !important;
                }

                .wpbs-secondary-button,
                .wpbs-primary-button {}
            }

            .wpbs-secondary-button.logic-rule-add-and {
                position: absolute;
                right: 45px;
                bottom: 0;
            }
        }

        .wpbs-logic-rules .wpbs-logic-rule .wpbs-remove-button,
        .wpbs-discount-validity-row .wpbs-remove-button {
            top: auto;
            bottom: 0;
        }

        .wpbs-logic-rule-group:first-of-type {
            .wpbs-logic-rule-group-inner {
                .wpbs-logic-rule {
                    &:first-of-type {
                        padding-right: 55px;

                        .wpbs-secondary-button.logic-rule-add-and {
                            right: 0;
                        }
                    }
                }
            }
        }

        .wpbs-secondary-button,
        .wpbs-primary-button {
            padding-top: 9px;
            padding-bottom: 9px;
        }


        table.wpbs_customers {
            tbody {
                .future_bookings {
                    padding-bottom: 12px !important;
                }
            }
        }
    }
}



@media screen and (max-width: 600px) {
    body[class*="wp-booking-system_page"] {
        #wpbs-wpbs-settings-field-register-website .wpbs-input {
            display: block;

            #wpbs-deregister-website-button {
                margin-left: 0;
            }
        }

        .wpbs-wrap-edit-discount,
        .wpbs-wrap-edit-coupon,
        .wpbs-wrap-view-customer,
        .wpbs-wrap-edit-form,
        .wpbs-wrap-edit-calendar {
            .wpbs-plugin-sticky-header {
                .wpbs-header-buttons {
                    display: none;
                }

                #titlediv {
                    flex-basis: 100%;
                    margin-left: 0;
                    order: 2;
                    margin-top: 8px;
                }
            }
        }

        .wpbs-wrap-legend-items,
        .wpbs-wrap-add-legend-item {
            .wpbs-plugin-sticky-header {
                .wpbs-header-buttons {
                    margin-top: 8px;
                }
            }
        }


        .wpbs-logic-rule-group-inner {
            .wpbs-logic-rule {
                &:first-of-type {
                    padding-right: 0 !important;

                    .wpbs-secondary-button.logic-rule-add-and {
                        right: auto;
                        bottom: auto;
                        position: relative;
                    }
                }
            }
        }


        .wpbs-logic-rules .wpbs-logic-rule {
            padding-right: 0;

            .wpbs-secondary-button.logic-rule-add-and {
                position: relative;
                right: auto;
                bottom: auto;
            }

            .wpbs-logic-rule .wpbs-remove-button,
            .wpbs-remove-button {
                position: relative;
                right: auto;
                bottom: auto;
            }
        }

        .wpbs_calendars {
            .row-actions {
                left: 0 !important;
            }
        }

        .wpbs-fixed-interval {
            .wpbs-third {
                flex-basis: 100% !important;
                max-width: 100% !important;
            }
        }

        .wpbs-wrap-bookings {
            .wpbs-plugin-sticky-header {
                display: block;

                .wpbs-header-buttons {
                    margin-top: 8px;
                }
            }
        }

        .wpbs-bm-tablenav-filters {
            .wpbs-input:first-of-type {
                margin-bottom: 8px;
            }

            #filter-submit {
                @media screen and (max-width: 474px) {
                    margin-left: 0;
                }
            }
        }

        #wpbs-ical-url-import {
            .wpbs-buttons {
                a.wpbs-secondary-button {
                    i:not(.wpbs-icon-trash) {
                        display: none;
                    }
                }
            }

            @include tiny {
                .wpbs-buttons {
                    display: block;
                    width: 100%;

                    a.wpbs-secondary-button {
                        display: block;
                        width: 100%;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                        margin-top: 6px;

                        &+a.wpbs-secondary-button {
                            margin-left: 0 !important;
                        }
                    }
                }
            }
        }

        .wpbs-wrap-edit-legend-item {
            .wpbs-plugin-sticky-header {
                display: block;

                .wpbs-header-buttons {
                    margin-top: 8px;
                }
            }
        }
    }
}

// Cancellation 
.wpbs-active-cancellation-request {
    display: inline-block;
    font-size: 13px;
    text-decoration: none;
    vertical-align: middle;
    line-height: 26px;
    border-radius: 4px;
    padding: 0 9px;
    color: #000;
    position: relative;
    top: -2px;
    font-weight: normal;
    background-color: rgb(239 83 80 / 30%);
    margin-left: 10px;
}



/*** Premium CTA ***/
// Premium CTA: same styles, nested selectors.
.wpbs-wrap-upgrade-cta {
    --wpbs-cta-text: #202327;
    --wpbs-cta-muted: #50575e;
    --wpbs-cta-accent: #5683fd;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 28px;
    width: 100%;
    max-width: 1100px;
    padding: 24px 28px;
    border: 1px solid #dcdcde;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
    text-decoration: none;

    span {
        display: block;
    }

    .wpbs-wrap-upgrade-cta-left-col {
        flex: 1 1 480px;
        min-width: 0;
    }

    .wpbs-wrap-upgrade-cta-right-col {
        flex: 0 0 auto;
    }

    .wpbs-wrap-upgrade-cta-heading {
        color: var(--wpbs-cta-text);
        font-size: 22px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: -.02em;
    }

    .wpbs-wrap-upgrade-cta-text {
        max-width: 620px;
        margin-top: 8px;
        color: var(--wpbs-cta-muted);
        font-size: 14px;
        line-height: 1.55;
    }

    .wpbs-wrap-upgrade-cta-button {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 44px;
        padding: 12px 18px;
        border: 1px solid transparent;
        border-radius: 6px;
        background: var(--wpbs-cta-accent);
        color: #fff;
        font-size: 13px;
        line-height: 18px;
        font-weight: 600;
        text-align: center;
        transition: background-color .15s ease;

        svg {
            flex-shrink: 0;
        }
    }

    &:hover,
    &:focus {
        text-decoration: none;
    }

    &:hover,
    &:focus-visible {
        .wpbs-wrap-upgrade-cta-button {
            background-color: rgb(35.5964912281, 94.0175438596, 252.4035087719);
        }
    }

    &:focus-visible {
        outline: 2px solid #315ee8;
        outline-offset: 3px;
        box-shadow: none;
    }

    &.wpbs-wrap-upgrade-cta-dark {
        --wpbs-cta-text: #fff;
        --wpbs-cta-muted: #c7cdd3;
        background: #2d3338;
        border-color: #41474e;
        border-left-color: #7893ff;
    }

    @media (max-width: 600px) {
        padding: 22px 20px;

        .wpbs-wrap-upgrade-cta-heading {
            font-size: 20px;
        }

        .wpbs-wrap-upgrade-cta-right-col,
        .wpbs-wrap-upgrade-cta-button {
            width: 100%;
        }
    }
}



// Premium upgrade page.
.wpbs-plugin-wrapper.wpbs-wrap-upgrade-to-premium {
    --wpbs-premium-text: #202327;
    --wpbs-premium-muted: #50575e;
    --wpbs-premium-accent: #5683fd;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    align-items: start;
    align-content: start;
    gap: 24px;
    width: 100%;
    max-width: none;
    padding: 0 20px 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--wpbs-premium-text);

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    >h3:first-child {
        grid-column: 1 / -1;
        margin: 0;
        padding: 0;
        color: var(--wpbs-premium-text);
        font-size: 24px !important;
        line-height: 1.3 !important;
        font-weight: 600;
        letter-spacing: -.02em;

        @media (max-width: 600px) {
            font-size: 20px !important;
        }
    }

    .wpbs-premium-main {
        min-width: 0;

        >ul {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
            width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;

            >li {
                float: none;
                width: auto;
                min-width: 0;
                height: auto;
                margin: 0;
                padding: 21px 24px 22px 24px;
                border: 1px solid #dcdcde;
                border-radius: 10px;
                background: #fff;
                box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
                list-style: none;

                >strong {
                    display: block;
                    color: var(--wpbs-premium-text);
                    font-size: 16px;
                    line-height: 1.5;
                    font-weight: 600;
                    position: relative;
                    padding-right: 32px;

                    >.dashicons {
                        position: absolute;
                        top: -2px;
                        right: 0;
                        display: grid;
                        place-items: center;
                        width: 28px;
                        height: 28px;
                        margin: 0;
                        border: 3px solid #fff;
                        border-radius: 50%;
                        background: #eef3ff;
                        box-shadow: 0 0 0 1px #d6e0ff;
                        color: var(--wpbs-premium-accent);
                        font-size: 18px;
                        line-height: 1;

                        &::before {
                            display: block;
                            width: auto;
                            height: auto;
                            line-height: 1;
                        }
                    }
                }

                >p {
                    margin: 12px 0 0;
                    padding: 0;
                    color: var(--wpbs-premium-muted);
                    font-size: 14px;
                    line-height: 1.55;
                    font-weight: 400;
                }

                @media (max-width: 600px) {
                    padding: 22px 20px;
                }
            }

            @media (max-width: 600px) {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        >h3.wpbs-clear {
            clear: both;
            margin: 24px 0 0;
            padding: 0;
            color: var(--wpbs-premium-muted);
            font-size: 14px;
            line-height: 1.7;
            font-weight: 400;
            letter-spacing: normal;

            >a {
                color: #315ee8;
                text-decoration: underline;
                text-underline-offset: 3px;

                &:hover {
                    color: #244dcc;
                }
            }

            @media (max-width: 600px) {
                text-align: left;
            }
        }
    }

    .wpbs-premium-sidebar {
        display: grid;
        gap: 16px;
        min-width: 0;

        >.cta,
        >.cta-2 {
            float: none;
            display: block;
            width: 100%;
            margin: 0;
            padding: 24px;
            border: 1px solid #dcdcde;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0px 1px 2px rgba(32, 35, 39, .1);
            text-align: left;
        }

        >.cta {
            background-color: #2d3338;

            >h3 {
                margin: 0;
                padding: 0;
                color: #ffffff !important;
                font-size: 22px !important;
                line-height: 1.3;
                font-weight: 600;
                letter-spacing: -.02em;
            }

            >.prices {
                margin: 12px 0 0;
                padding: 0;
                color: #ffffff;
                font-size: 14px;
                line-height: 1.55;
                font-weight: 400;
            }

            >.wpbs-button {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                min-height: 44px;
                height: auto;
                margin: 20px 0 0;
                padding: 12px 18px;
                border: 1px solid transparent;
                border-radius: 6px;
                background-color: rgb(35.5964912281, 94.0175438596, 252.4035087719);
                box-shadow: none;
                color: #fff;
                font-size: 13px;
                line-height: 18px;
                font-weight: 600;
                text-align: center;
                text-decoration: none;
                transition: background-color .15s ease;

                &:hover,
                &:focus-visible {
                    background: var(--wpbs-premium-accent);
                    color: #fff;
                    text-decoration: none;
                }
            }
        }

        >.cta-2 {
            border: 1px dashed #b9caff;
            background: #f4f7ff;
            box-shadow: none;

            >h4 {
                margin: 0;
                padding: 0;
                color: var(--wpbs-premium-text);
                font-size: 14px;
                line-height: 1.55;
                font-weight: 500;
                text-align: center;
            }

            >.discount {
                margin: 16px 0 0;
                padding: 0;

                >.wpbs-select-on-click {
                    position: relative;
                    display: block;
                    width: 100%;
                    margin: 0;
                    padding: 10px 12px;
                    border: 1px solid #d6e0ff;
                    border-radius: 6px;
                    background: #fff;
                    box-shadow: none;
                    color: var(--wpbs-premium-text);
                    font-family: Consolas, Monaco, monospace;
                    font-size: 13px;
                    line-height: 1.5;
                    font-weight: 600;
                    letter-spacing: .04em;
                    text-align: center;
                    overflow-wrap: anywhere;
                    white-space: normal;
                    cursor: pointer;
                    transition: border-color .15s ease;

                    &:hover {
                        border-color: var(--wpbs-premium-accent);
                    }

                    .wpbs-tooltip {
                        z-index: 1;
                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
                        font-weight: 400;
                        letter-spacing: normal;
                        white-space: nowrap;
                    }
                }
            }

            >.wpbs-premium-copy-hint {
                margin: 8px 0 0;
                padding: 0;
                color: var(--wpbs-premium-muted);
                font-size: 12px;
                line-height: 1.5;
                text-align: center;
            }
        }
    }

    a:focus-visible,
    button:focus-visible {
        outline: 2px solid #315ee8;
        outline-offset: 3px;
        box-shadow: none;
    }

    @media (max-width: 1100px) {
        grid-template-columns: minmax(0, 1fr);

        .wpbs-premium-sidebar {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: start;
        }
    }

    @media (max-width: 767px) {
        padding: 0 16px 24px;
    }

    @media (max-width: 600px) {
        .wpbs-premium-sidebar {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}