@font-face {
    font-family: 'BrownMedium';
    src: url('fonts/BrownPro_RegularAlt.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }

.boxcenter,
.commoncenter,
.pos-abs-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.boxcenter,
.commoncenter,
.pos-abs-center,
.signup-content {
    transform: translate(-50%, -50%)
}

*,
ol,
ul {
    padding: 0;
    margin: 0
}

.service-image,
.service-letter,
.service-popup-letter,
.zb-btone-container.zb-btone-themeeight .zb-btone-bookbutton>div>span,
.zb-btone-container.zb-btone-themefive .zb-btone-bookbutton>div>span,
.zb-btone-container.zb-btone-themeseven .zb-btone-bookbutton>div>span,
.zb-btone-container.zb-btone-themesix .zb-btone-bookbutton>div>span {
    text-transform: uppercase
}

*,
.slot-group ul li,
.time-slots,
.zb-btone-ap-popup-summary *,
.zb-btone-content *,
.zb-btone-inner-content,
.zb-redirect-popup {
    box-sizing: border-box
}

.commoncenter {
    position: fixed
}

.boxcenter {
    position: absolute
}

.visible-element {
    opacity: 1;
    visibility: visible
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.zb-flex-container {
    display: flex
}

.zb-flex-container>div,
.zb-flex-container>span {
    align-self: center
}

body {
    background-color: white !important;
    font-size: 13px;
    color: #181818 !important;
    height: 100vh !important;
    -webkit-font-smoothing: auto;
    overflow: hidden !important;
}

ol,
ul {
    list-style: none
}

.fonts-regular,
body {
    font-family: 'BrownMedium';
}

.fonts-semibold,
.service-header,
.steps ul>li>.value,
.zb-payment-loading>h4,
.zb-resource-choosetime>span.active {
    font-family: 'BrownMedium';
}

.book-container .header {
    position: fixed;
    -webkit-box-shadow: 0 1px 3px #d8d8d8;
    -moz-box-shadow: 0 1px 3px #d8d8d8;
    box-shadow: 0 1px 3px #d8d8d8;
    width: 100%;
    top: 0;
    background-color: #FFF;
    height: 80px
}

.book-inner-container,
.header-container {
    width: 80%;
    max-width: 1080px
}

.header-container {
    margin: 0 auto;
    padding: 7px 30px;
    width: 100%;
    max-width: inherit
}

.book-container {
    overflow-y: auto
}

.book-inner-container {
    margin: 110px auto 0
}

.service-icon-large {
    width: 40px;
    height: 40px;
    display: block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-size: cover
}

.sign-up {
    color: #fa667b
}

.booknow-header-image {
    padding: 25px
}

#zb-btone-booknow-button{
    transition: .6s all ease-in-out;
}

#zb-btone-booknow-button{
    background: #828dfa;
    color: white;
    transition: .3s all ease-in-out;
}

.label {
    display: inline-block;
    font-size: 14px;
    position: relative
}

.service-header {
    font-size: 15px;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    color: #484848
}

.slot-title,
.staff-cost,
.staff-details {
    font-family: 'BrownMedium';
}

.service-image {
    display: inline-block;
    width: 80px;
    margin-right: 20px;
    height: 80px;
    line-height: 75px;
    text-align: center;
    font-size: 23px;
    background-size: cover
}

.selected-staff {
    margin: 30px;
    padding: 18px 0;
    border-bottom: 1px solid #EBEBEB;
    border-top: 1px solid #EBEBEB;
    height: 100px
}

.staff-list {
    width: 280px;
    position: relative;
    border: 1px solid #EBEBEB;
    height: 62px
}

.staff-list ul {
    position: absolute;
    background-color: #FFF;
    min-height: 51px;
    overflow: hidden;
    -webkit-transition: all ease .6s;
    -moz-transition: all ease .6s;
    transition: all ease .6s;
    max-height: 0;
    padding-top: 59px;
    top: 0;
    z-index: 2;
    border: 1px solid #E0E0E0;
    right: -1px;
    left: -1px
}

.staff-list ul.open {
    max-height: 230px;
    overflow: auto;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1)
}

.staff-list ul li {
    position: relative;
    font-size: 14px;
    min-height: 50px;
    padding-left: 15px;
    width: 100%
}

.staff-cost,
.staff-details {
    color: #181818
}

.staff-cost {
    color: #7e4eb3
}

.slot-title {
    color: #888;
    font-size: 14px;
    width: 120px
}

.slot-group ul {
    width: calc(100% - 120px)
}

.slot-group ul li,
.time-slots {
    float: left;
    padding: 5px 10px;
    margin: 0 0 10px 20px;
    border: 1px solid #6ac199;
    background: #fff;
    width: 80px;
    text-align: center;
    font-size: 11px;
    color: #888;
    cursor: pointer;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    transition: all ease .3s;
    white-space: nowrap
}

.common-dropdown,
.zb-invoice-sumary .zb-iv-book-appointent>span>span,
.zb-timezone-freeze-dropdown {
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

.slot-group ul li.active,
.slot-group ul li:hover,
.time-slots.active,
.time-slots:hover {
    background: #6ac199;
    color: #fff
}

.slot-group ul li:hover {
    cursor: pointer !important
}

.slot-group ul li {
    float: none !important;
    margin: 0 !important;
    width: auto !important
}

.slot-group ul li.customer-before-time:hover {
    cursor: default !important
}

.label-container textarea {
    height: 100px;
    resize: none
}

.proceed-btn,
.sign-in-iframe .signinForm .btn {
    background: #7e4eb3;
    color: #fff;
    padding: 10px 16px;
    position: relative;
    font-size: 13px;
    letter-spacing: .7px;
    cursor: pointer;
    display: inline-block;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #7d4db3
}

.staff-icon {
    width: 33px
}

.success-message {
    text-align: center;
    color: #82bf07;
    padding: 60px 0 0;
    font-size: 14px;
    height: 80px;
    margin: 9px 0 25px
}

.success-tick {
    width: 50px;
    height: 50px;
    background: #82BF07;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    left: 50%;
    top: 0;
    transform: translateX(-50%)
}

.summary-list {
    padding: 50px 140px;
    height: auto;
    background-color: #FFF !important
}

.summary-header {
    color: #181818;
    font-size: 28px;
    text-align: center;
    border-bottom: 4px solid #181818
}

.appointment-content .steps ul>li {
    padding-left: 40px
}

.steps ul>li>.book-label {
    font-size: 14px;
    position: relative;
    padding-left: 23px;
    text-transform: none
}

.steps ul>li>.value {
    font-size: 15px;
    color: #333
}

.book-details {
    font-size: 13px;
    font-family: 'BrownMedium';
}

.steps ul>li>.book-label.appointment-id:before {
    content: "#";
    position: absolute;
    opacity: .5;
    left: 2px;
    font-size: 19px;
    font-family: 'BrownMedium';
    top: 11px
}

.invoice-summary-color,
.summary-buttons {
    color: #296DE0
}

.summary-buttons {
    padding: 40px 0 20px;
    border-top: 4px solid #181818
}

.summary-buttons>a,
.summary-buttons>span {
    border-right: 1px solid #7e4eb3;
    padding: 0 10px;
    color: #7e4eb3
}

.summary-buttons>span:last-child {
    border-right: none
}

.summary-book-button {
    padding: 7px 10px
}

.common-dropdown {
    z-index: 1;
    border: 1px solid #F0F0F0;
    top: 12px;
    -webkit-box-shadow: 0 0 2px 0 #F0F0F0;
    -moz-box-shadow: 0 0 2px 0 #F0F0F0;
    box-shadow: 0 0 2px 0 #F0F0F0;
    color: #151515;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    transform: translate(-50%, 0);
    text-align: left;
    left: 50%;
    white-space: nowrap
}

.common-dropdown.open {
    top: 22px;
    opacity: 1;
    visibility: visible
}

.common-dropdown>span {
    display: block;
    padding: 9px 11px;
    background-color: #FFF
}

.common-dropdown>span:hover {
    background-color: #FBFBFB
}

.common-dropdown:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: -6px;
    background-color: #FFF;
    transform: rotate(45deg);
    border: 1px solid #EFEFEF;
    border-bottom: none;
    border-right: none;
    -webkit-box-shadow: 0 -1px 2px -1px #F0F0F0;
    -moz-box-shadow: 0 -1px 2px -1px #F0F0F0;
    box-shadow: 0 -1px 2px -1px #F0F0F0;
    left: 50%;
    margin-left: -5px
}

.popup-summary,
.zb-btone-ap-popup-summary {
    -webkit-transition: all .5s ease-in 0s;
    -moz-transition: all .5s ease-in 0s;
    transform: translateX(100%)
}

.company-contact>a,
.company-contact>span {
    font-size: 12px;
    position: relative;
    padding: 0 7px
}

.company-contact>a:after,
.company-contact>span:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 11px;
    right: 0;
    top: 3px;
    background-color: #939393
}

.company-contact>a:last-child:after,
.company-contact>span:last-child:after,
.summary-buttons>a:last-child:after,
.summary-buttons>span:last-child:after {
    display: none
}

.footer {
    width: 100%;
    text-align: center;
    padding-bottom: 60px
}

.book-details .invoice-summary-color {
    text-decoration: underline
}

.instagram-icon {
    display: inline-block;
    vertical-align: middle;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/customers-engine/assets/images/Instagram-1922aca8edc547d5bab526890b03d16c.svg);
    height: 13px;
    width: 13px;
    background-size: cover
}

.bookmark-icon .zb-starfill,
.signup-container.signup-container-popup .booknow-header,
.signup-container.signup-container-popup .sign-up-popup .label-container>div:first-child,
.signup-container.signup-container-popup .signup-button .label-container>div:first-child,
.signup-container.signup-container-popup .zb-close,
.staff-list ul>li.active {
    display: none
}

.freeze-layer,
.overlay,
.popup-summary {
    position: fixed;
    height: 100vh;
    visibility: hidden;
    opacity: 0;
    backface-visibility: hidden;
    top: 0;
    right: 0
}

.freeze-layer {
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .2)
}

.popup-summary {
    overflow: hidden;
    background: #FFF;
    width: 50%;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    transition: all .5s ease-in 0s;
    z-index: 30
}

.overlay {
    left: 0;
    background-color: rgba(0, 0, 0, .2);
    bottom: 0;
    z-index: 1
}

.freeze-layer,
.popup-summary.open {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible
}

.overlay.open {
    z-index: 10;
    cursor: default;
    visibility: visible;
    opacity: .3
}

.popup-summary.open {
    transform: translateX(0)
}

.ca-summary .appointment-header {
    padding: 15px 20px;
    background-color: #FBFBFB;
    border-bottom: 1px solid #F4F4F4
}

.appointment-content {
    height: calc(100% - 70px);
    padding: 30px 60px 30px 4px
}

.reschedule-popup .appointment-content {
    height: calc(100% - 105px)
}

.zb-reschedule-to-time {
    width: 40%
}

.appointment-footer {
    border-top: 1px solid #F4F4F4;
    margin-left: 40px
}

.appointment-reschedule-date {
    padding: 35px 10px;
    border-top: 1px dashed #999;
    border-bottom: 1px dashed #999;
    margin-left: 20px
}

.reschedule-buttons {
    bottom: 0
}

.reschedule-buttons .add,
.reschedule-buttons .cancel {
    font-size: 15px;
    text-align: center;
    padding: 19px
}

.reschedule-buttons .cancel {
    background: #EEE;
    color: #111
}

.reschedule-buttons .add {
    background: #7E4EB3;
    color: #FFF
}

.customer-profile-icon {
    width: 20px;
    height: 20px;
    background-size: 100% 100%
}

.sign-in-iframe .signin-iframe-parent iframe {
    height: 260px
}

.sign-in-iframe.forgot-password .signin-iframe-parent iframe {
    height: 330px
}

.dropdown-box.customer-profile-box {
    width: 240px;
    background-color: #FFF;
    top: 47px;
    right: 0
}

.dropdown-box.customer-profile-box:before {
    right: 20px
}

.dropdown-box.customer-profile-box li:hover {
    cursor: pointer
}

.selected-staff-booknow {
    z-index: 4;
    position: absolute;
    padding: 12px 15px;
    background-color: #fff;
    height: 100%;
    top: 0;
    left: 0
}

.selected-staff-booknow>div {
    padding: 0;
    border-bottom: none;
    background: 0 0
}

.selected-staff-booknow>div:last-child {
    width: calc(100% - 33px)
}

.signup-container {
    backface-visibility: hidden;
    background: #FAFAFA;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: transform .3s ease-in 0s;
    -moz-transition: transform .3s ease-in 0s;
    transition: transform .3s ease-in 0s;
    width: 100%;
    z-index: 20;
    transform: scale(1.5)
}

.signup-container.visible {
    backface-visibility: visible;
    opacity: 1;
    visibility: visible;
    transform: scale(1)
}

.signup-container:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    background: linear-gradient(110deg, #2d2752 0, #3a397b 30.44%, #7776B3 100%);
    z-index: -1
}

.booknow-class-popup,
.staff-select-box {
    left: 50%;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3)
}

.signup-container.signup-container-popup {
    background: rgba(0, 0, 0, .2)
}

.signup-container.signup-container-popup:after {
    background: 0 0
}

.signup-container.signup-container-popup .signup-content {
    padding: 35px 0
}

.signup-container.signup-container-popup .service-header {
    font-size: 26px;
    font-family: 'BrownMedium';
    text-align: left;
    padding-left: 40px
}

.signup-container.signup-container-popup .sign-up-popup,
.signup-container.signup-container-popup .signup-button {
    width: 345px;
    margin: auto
}

.signup-container.signup-container-popup .booking-info-container,
.signup-container.signup-container-popup .signup-content {
    width: 425px !important;
    max-height: 550px;
    height: inherit
}

.signup-container .header-signup-btn {
    text-align: center
}

.header-signup-btn .proceed-btn {
    background-color: #51487F
}

.signup-content {
    width: 750px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
    -webkit-box-shadow: 0 0 5px 1px #b1b1b6;
    -moz-box-shadow: 0 0 5px 1px #b1b1b6;
    box-shadow: 0 0 5px 1px #b1b1b6;
    padding: 50px 0
}

.signup-container .booknow-header {
    color: #fff
}

.search-close {
    font-size: 21px;
    color: red
}

.branch-setting-search .search {
    height: 40px;
    padding: 0 23px;
    border-bottom: 1px solid #EFEFEF
}

.appointment-search-open+div.table-row>div {
    padding-top: 60px;
    -webkit-transition: padding-top .3s;
    -moz-transition: padding-top .3s;
    transition: padding-top .3s
}

.booknow-header {
    font-size: 24px
}

.cancel-popup {
    width: 500px
}

.appointmentid-icon {
    background: linear-gradient(to bottom, #d3528d 0, #9f6aa9 100%);
    width: 21px;
    height: 21px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    display: inline-block;
    position: relative
}

.zb-facebook {
    color: #3e5c96
}

.zb-twitter {
    color: #2BAEE8
}

.appointment-reschedule-date .zb-calender {
    z-index: 1
}

.slot-group-header {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.booking-slot-group {
    max-height: calc(100vh - 465px);
    overflow: auto;
    background-color: #FFF;
    padding: 18px 22px;
    border: 1px solid #EBEBEB;
    margin-bottom: 50px
}

.booking-no-staff .booking-slot-group {
    max-height: calc(100vh - 545px)
}

.forget-password a:hover {
    text-decoration: underline
}

.popup-summary .booking-slot-group,
.popup-summary .selected-staff,
.popup-summary .slot-group-header {
    margin-right: 0 !important
}

.popup-summary .appointment-content {
    padding-right: 40px
}

.template-one-embed.book-container .book-inner-container {
    width: 100%;
    max-width: inherit;
    margin: inherit;
    padding-top: 0 !important;
    height: 100vh;
    margin-top: 0 !important
}

.template-one-embed .success-message {
    margin-top: 30px
}

.invoice-summary-additionalinfo .value>span:first-child,
.zb-resource-choosetime>span+div>.booking-slot-group {
    margin-top: 0 !important
}

.template-one-embed .staff-booking-container {
    top: 0;
    height: 100%
}

.zb-paymentsummary .zb-payment-summary:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 150px;
    top: 0;
    bottom: 0;
    background-color: #E8E8E8;
    left: 0
}

.class-service-timeslot .zcb-date-picker-content {
    top: -64px
}

.inactive-workspace {
    background-color: #F3F3F3
}

.workspace-disabled {
    width: 95px;
    height: 110px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/customers-engine/assets/images/Workspace-disabled-e1689878367eabadd09e1082627f191f.svg);
    background-size: 100% 100%
}

.inactive-workspace .font-semibold {
    font-size: 23px;
    color: #50497D
}

.workspace-disabled-text {
    color: #ADADAD
}

.payment-label .zb-link {
    transform: rotate(-49deg);
    font-size: 6px;
    left: -2px
}

.cancel-alert.cancel-popup .confirm-cancel-button {
    justify-content: flex-end
}

.zb-resource-choosetime>span {
    padding: 18px 14px;
    width: 195px;
    border: 1px solid #EBEBEB;
    background-color: #FAFAFA;
    border-bottom: none
}

.zb-resource-choosetime>span:first-child {
    border-right: none
}

.zb-resource-choosetime>span.active {
    background-color: #FFF;
    border-bottom: none
}

.link-button {
    background-color: #6b9BE6;
    color: #FFF;
    padding: 7px 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    min-width: 135px
}

.link-button .common-dropdown {
    bottom: 37px;
    top: inherit
}

.link-button .common-dropdown:after {
    transform: rotate(225deg);
    bottom: -6px;
    top: inherit
}

.bookmark-icon {
    width: 16px;
    height: 14px
}

.bookmark-icon .zb-starfill {
    color: #E1E1E0
}

.bookmark-icon:hover .zb-starfill {
    display: block
}

.template-four-staffallocated {
    display: none
}

.booknow-class-availability {
    border: 1px solid #EBEBEB;
    background-color: #FFF
}

.booknow-class-availability .service-image {
    width: 60px;
    height: 60px;
    line-height: 58px;
    border: 1px solid transparent
}

.booknow-class-availability.no-staff-groupbooking {
    min-height: 400px
}

.booknow-class-availability .booknow-class-availability-continue {
    border-top: 1px solid #EFEFEF
}

.booknow-class-availability .booknow-class-availability-continue .normal-button {
    width: 115px
}

.booknow-class-availability .class-availability-gray {
    color: #666
}

.booknow-class-availability .class-availability-view {
    color: #50497F
}

.staff-select-box.booknow-class-popup {
    width: 590px;
    max-height: initial;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 31
}

.staff-select-box {
    background: #FFF;
    border: 1px solid #EDEDED;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);
    max-height: 340px;
    min-width: 310px;
    overflow: auto;
    padding: 8px 0 10px;
    top: 50%;
    transform: translate(-50%, -40%);
    z-index: 14;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

.staff-select-box.open {
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible
}

.staff-select-box>div {
    cursor: pointer;
    padding: 17px 25px;
    position: relative;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

.staff-select-box>div:hover,
.staff-select-box>div:hover .description-field-view:after,
.staff-select-box>div:hover .description-field-view:before {
    background: #F7F7F7
}

.staff-select-box .zb-tick {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

.staff-select-box>.active .zb-tick {
    visibility: visible;
    opacity: .7
}

.staff-select-box.booknow-class-popup+.overlay.open {
    z-index: 30
}

.bca-header {
    border-bottom: 1px solid #EBEBEB;
    padding: 17px 25px
}

.booknow-class-popup-content {
    max-height: 450px;
    overflow-y: auto
}

.zb-common-signup-popup.signup-content {
    padding-bottom: 10px
}

.zb-common-signup-popup.signup-content .booking-info-container {
    max-height: 500px;
    width: initial !important;
    overflow-y: auto
}

.selected-service-name {
    max-width: 210px
}

.terms-conditions-checkbox .checkbox-group>div {
    padding-left: 23px
}

.label-container.terms-conditions-checkbox .checkbox-group>div label {
    padding-left: 0 !important
}

.label-container.terms-conditions-checkbox .checkbox-group>div label:after {
    top: 4px !important
}

.label-container.terms-conditions-checkbox .checkbox-group label:before {
    top: 1px
}

.label-container.terms-conditions-checkbox .checkbox-group>div a {
    color: #2E71E0;
    text-decoration: underline
}

.bookings-field-theme.bookings-field-theme-reg .date-picker-focus:focus .txt-input,
.bookings-field-theme.bookings-field-theme-reg .zcp-dropdown .select-drop-box:focus,
.bookings-field-theme.bookings-field-theme-reg input:focus {
    border: 1px solid #33B5E5 !important;
    -webkit-box-shadow: 0 0 4px 0 rgba(42, 124, 255, .3);
    -moz-box-shadow: 0 0 4px 0 rgba(42, 124, 255, .3);
    box-shadow: 0 0 4px 0 rgba(42, 124, 255, .3)
}

.bookings-field-theme.bookings-field-theme-reg .proceed-btn {
    background-color: #33B5E5 !important;
    border: 1px solid #33B5E5 !important;
    color: #FFF !important
}

.bookings-field-theme.bookings-field-theme-reg .proceed-btn:hover {
    background-color: #2caede !important;
    border: 1px solid #2caede !important;
    -webkit-box-shadow: 0 0 4px 0 rgba(42, 124, 255, .3);
    -moz-box-shadow: 0 0 4px 0 rgba(42, 124, 255, .3);
    box-shadow: 0 0 4px 0 rgba(42, 124, 255, .3)
}

.booknow-class-popup {
    background: #fff;
    border: 1px solid #ededed;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);
    overflow: auto;
    padding: 8px 0 10px;
    top: 50%;
    transform: translate(-50%, -40%);
    z-index: 14;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

.booknow-class-popup.open {
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible
}

.bca-available-date .class-availability-view {
    margin-left: 20px
}

.bookings-field-theme .label-container .zcb-date-picker .zcb-date-picker-content div {
    font-size: 11px
}

.zb-payment-details {
    padding: 13px 10px;
    border: 1px solid #E1E1E1;
    margin-bottom: 18px
}

.bookings-field-theme .zb-payment-details>div {
    margin-bottom: 0 !important
}

.bookings-field-theme .zb-payment-details>div>div:first-child {
    width: 130px
}

.freeze-timezone-input {
    opacity: 0
}

.iti .iti__country-list {
    max-width: 390px
}

.zb-redirect-popup {
    padding: 35px 20px;
    z-index: 41;
    min-width: 400px;
    border-radius: 4px
}

.zb-redirect-circle {
    width: 42px;
    height: 42px;
    border: 2px solid #65BE65;
    display: inline-block;
    border-radius: 50px
}

.zb-redirect-circle .zb-tick {
    color: #65BE65
}

.tooltip-element {
    width: 80%;
    background-color: #FFF;
    border: 1px solid #E6E5F2;
    border-radius: 2px;
    line-height: 20px;
    box-shadow: 0 0 7px 0 #DDD;
    color: #222
}

.tooltip-element.tooltip-element:before {
    border-bottom-color: #FFF
}

@media print {
    @page {
        width: 100%;
        size: auto;
        padding: 0 50px 0 50px
    }

    body {
        background-color: #FFF !important
    }

    body * {
        visibility: hidden
    }

    .book-container {
        height: 100% !important;
        width: 100% !important
    }

    .book-inner-container {
        width: 100% !important;
        max-width: inherit !important;
        height: 100%;
        margin: 0;
        padding: 0
    }

    .summary-list {
        padding: 50px
    }

    #invoice,
    #invoice *,
    #summary,
    #summary *,
    #zb-invoice-summary,
    #zb-invoice-summary * {
        visibility: visible !important
    }

    #print-icon,
    #print-invoice,
    #publiclink,
    #publiclink2,
    #reschedule,
    #reschedule-cancel,
    #reschedule-cancel-two .common-link,
    #reschedule-cancel-two .text-muted,
    #summary-buttons a,
    #summary-buttons span,
    #summary-buttons>div {
        display: none
    }

    #summary {
        width: 100%;
        position: absolute;
        height: 100%
    }

    .template-two-container .book-container .zb-headder-wrapper,
    .template-two-container .zb-invoice-summary {
        margin-top: 30px !important
    }

    #another-appointment .zb-btnstyle {
        visibility: hidden !important
    }
}

.printview {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none
}

.zb-line-loading-template1.zb-line-loading .zb-line,
.zb-line-loading-template1.zb-line-loading .zb-line .zb-break-animation {
    height: 4px
}

.zb-line-loading-template1.zb-line-loading .zb-line .zb-break-animation {
    width: 18px !important;
    background-color: #FFF !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important
}

.zb-line-loading-template1.zb-line-loading .zb-break-animation.zb-line-dot1 {
    -webkit-animation: zb-line-loading 8s infinite;
    -moz-animation: zb-line-loading 8s infinite;
    -ms-animation: zb-line-loading 8s infinite;
    animation: zb-line-loading 8s infinite
}

.zb-line-loading-template1.zb-line-loading .zb-break-animation.zb-line-dot2 {
    -webkit-animation: zb-line-loading 4s infinite;
    -moz-animation: zb-line-loading 4s infinite;
    -ms-animation: zb-line-loading 4s infinite;
    animation: zb-line-loading 4s infinite
}

.zb-line-loading-template1.zb-line-loading .zb-break-animation.zb-line-dot3 {
    -webkit-animation: zb-line-loading 2s infinite;
    -moz-animation: zb-line-loading 2s infinite;
    -ms-animation: zb-line-loading 2s infinite;
    animation: zb-line-loading 2s infinite
}

.signup-container-visible .zb-line-loading {
    top: 0 !important
}

.signup-container .signup-content {
    width: auto;
    padding: 50px 70px 50px 90px
}

.signup-container .signup-content .booking-info-container {
    width: auto !important
}

.zb-common-signup-popup.signup-content .booking-info-container {
    padding: 0 20px 0 0 !important
}

.signup-container:after {
    height: calc(100vh - 50%) !important
}

.zb-customer-hide-layer {
    position: fixed;
    opacity: 0;
    z-index: 100000;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important
}

.sign-in-iframe .signin-iframe-parent iframe {
    width: 390px !important
}

.zb-btone-themesignin-split {
    margin: 0 6px
}

.bookings-slot-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(77px, 1fr));
    grid-auto-flow: row dense;
    grid-gap: 15px;
    width: 100% !important
}

.signin-iframe-parent {
    min-height: 260px;
    width: 390px;
    margin: auto
}

.sign-in-iframe #loading {
    left: 50% !important;
    top: 50% !important;
    position: absolute;
    transform: translate(-50%, -50%);
    padding-bottom: 30px;
    width: auto !important
}

.sign-up-popup {
    width: 390px
}

.bookings-field-theme .label-container {
    flex-direction: column;
    padding: 0;
    margin-bottom: 18px !important;
    min-height: initial
}

.bookings-field-theme .label-container>div:first-child {
    width: auto;
    padding-top: 0
}

.bookings-field-theme .label-container>div.input-box {
    width: 100%;
    align-self: flex-start;
    margin-top: 8px;
    max-width: initial
}

.bookings-field-theme .terms-conditions-checkbox>div:first-child,
.bookings-field-theme.signup-button>div:first-child {
    display: none
}

.bookings-field-theme.signup-button.label-container>div.input-box {
    max-width: initial
}

.bookings-field-theme .header-signup-btn>button {
    flex: 1;
    width: 100%
}

.bookings-field-theme .proceed-btn {
    min-height: 46px;
    font-size: 16px;
    font-weight: 600
}

.bookings-field-theme .label-container>div,
.bookings-field-theme input {
    font-size: 15px;
    color: #444
}

.forget-password button.common-link {
    background-color: transparent
}

.zcb-date-picker.zcb-date-picker-week-box {
    width: calc(100% - 60px);
    margin: auto;
    display: block;
    max-width: 550px
}

.zcb-date-picker.zcb-date-picker-week-box .select-date {
    width: 100%;
    display: flex
}

.cookies-disabled {
    width: 95px;
    height: 85px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/customers-engine/assets/images/Cookies-disable-c9f77b2af7814645ff079f946d65fb3b.svg);
    background-size: 100% 100%
}

.disable-cookies {
    background-color: #FFF
}

.cookies-disabled-text {
    max-width: 325px;
    line-height: 23px;
    color: #6F6F6F
}

.bookingpage-logo {
    max-width: 110px;
    max-height: 50px;
    object-fit: contain
}

.reschedule-popup .bookings-slot-container {
    grid-template-columns: repeat(auto-fill, minmax(67px, 1fr))
}

.ca-summary.reschedule-popup .booking-slot-group .bookings-slot-container>li {
    padding: 8px 10px
}

.appointment-reschedule-date>div:first-child .txt-input {
    padding: 14px 0 11px 30px !important
}

.reschedule-popup .reschedule-buttons {
    z-index: 4
}

.transparent-layer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
    cursor: default;
    overflow: hidden;
    display: none
}

.staff-list.open-staff-list .transparent-layer {
    display: block
}

.book-container .booking-info-container.bookings-field-container .label-container>div:first-child {
    text-transform: inherit
}

.template-two-overlay {
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .4);
    z-index: 10
}

.payment-enable .label:after,
.payment-enable .label:before {
    content: '';
    position: absolute;
    border: 1px solid #49A857
}

.payment-enable .label:before {
    height: 18px;
    width: 18px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    left: 0;
    top: 1px
}

.payment-enable .label:after {
    height: 3px;
    width: 8px;
    transform: rotate(-39deg);
    top: 7px;
    left: 6px;
    border-top: none;
    border-right: none
}

.zb-timezone-freeze {
    border: 1px solid #E1E1E1;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 0 10px;
    width: 100%;
    height: 40px
}

.zb-timezone-freeze .zb-downarrow-4 {
    font-size: 6px
}

.zb-timezone-freeze-text-color {
    color: #666
}

.zb-timezone-freeze-dropdown {
    border: 1px solid #E1E1E1;
    left: -1px;
    right: -1px;
    height: 100px;
    background-color: #FFF;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    z-index: 9;
    text-align: center;
    line-height: 20px;
    top: 38px
}

.zb-timezone-freeze-dropdown .zb-timezone-freeze-text-color {
    width: 100%;
    padding: 0 15px
}

.zb-timezone-freeze-dropdown.open {
    opacity: 1;
    visibility: visible
}

.login-customer-info .proceed-btn {
    padding: 10px 0
}

.booking-info-container {
    width: 390px
}

.booking-info-container.booking-info-container-details {
    width: 100%
}

.zb-invoice-summary-one .footer {
    padding-top: 20px !important;
    padding-bottom: 0
}

.zb-invoice-summary-one .book-container {
    padding-bottom: 40px;
    height: 100vh
}

.zb-invoice-summary-one .booknow-signin-customername {
    color: #111 !important
}

.zb-invoice-summary-one .zb-line-loading .zb-line {
    background-color: #F74F7B !important
}

.zb-invoice-summary-one .zb-line-loading .zb-line .zb-break-animation {
    background-color: rgba(255, 255, 255, .8) !important
}

.zb-invoice-summary-one .select-time-zone {
    max-width: 60%
}

.copy-right {
    font-size: 10px;
    margin: 0 auto 10px
}

.copy-right,
.copy-right>a {
    color: #8C8C8C
}

.copy-right>a:hover {
    text-decoration: underline
}

.zb-embed-expired-layer {
    z-index: 99;
    color: #FFF;
    text-align: center
}

.zb-embed-expired-layer * {
    font-family: 'BrownMedium' !important;
    font-size: 15px
}

.zb-embed-expired-layer .zb-embed-expired-layer-link {
    color: #FFF;
    text-decoration: underline
}

.booking-slot-title {
    height: 27px;
    display: block;
    text-align: center;
    margin-bottom: 15px
}

.booking-slot-title-text {
    color: #666;
    position: absolute;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    background-color: #FFF;
    padding: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 12px
}

.booking-slot-title-border {
    position: absolute;
    width: 100%;
    left: 0;
    height: 1px;
    background-color: #F0F0F0;
    top: 50%
}

.ca-summary.reschedule-popup .slot-group ul li.active,
.ca-summary.reschedule-popup .slot-group ul li:hover {
    color: #FFF !important;
    background-color: #6AC199 !important
}

.ca-summary.reschedule-popup .slot-group ul li.customer-before-time {
    color: #E9E9E9;
    border: 1px solid #E9E9E9;
    cursor: default
}

.ca-summary.reschedule-popup .slot-group ul li.customer-before-time:hover {
    pointer-events: none;
    background-color: #FFF !important;
    color: #E9E9E9 !important
}

.ca-summary.reschedule-popup .bookings-slot-container {
    grid-template-columns: repeat(auto-fill, minmax(73px, 1fr))
}

.overflow-hidden {
    overflow: hidden !important
}

.book-container.template-one-embed.template-one-embed .zb-line-loading.zb-line-loading {
    top: 0 !important
}

.terms-conditions-error .checkbox-group label:before {
    border: 1px solid #E85F5F
}

.zb-invoice-summary-one .book-inner-container {
    padding: 0 7px;
    width: 100%
}

.zcb-bookings-page-embed .template-one-container.zb-btone-container .zb-btone-ap-popup-summary {
    border: 1px solid #F3F3F3
}

.staff-booking-page-info {
    max-height: calc(100vh - 420px) !important
}

.staff-booking-info-details {
    max-height: 100% !important;
    height: initial !important
}

.zcb-bookings-page-embed .template-one-embed .zb-bnc-container {
    height: 100vh !important
}

.bookings-field-theme.bookings-field-theme-reg .label-container .zcb-date-picker .zcb-date-picker-content div {
    background-color: #FFF
}

.zb-common-signup-popup .bookings-field-theme.bookings-field-theme-reg .zcb-date-picker-content {
    height: max-content;
    margin-left: 20px
}

.bookings-field-theme .terms-conditions-checkbox>div:last-child,
.zb-common-signup-popup .bookings-field-theme.bookings-field-theme-reg .terms-conditions-checkbox>div:last-child {
    width: 100%
}

.banner .banner-description {
    white-space: pre-wrap;
    padding: 0 22%
}

.bookings-field-theme.bookings-field-theme-guest>.label-container:nth-child(1) .zcp-dropdown.popup-up-open .selected-list-down,
.bookings-field-theme.bookings-field-theme-guest>.label-container:nth-child(2) .zcp-dropdown.popup-up-open .selected-list-down {
    top: 40px !important;
    bottom: inherit;
    border-bottom: 1px solid #E1E1E1;
    border-top: none
}

.bookings-field-theme.bookings-field-theme-guest>.label-container:nth-child(1) .zcp-dropdown.popup-up-open .selected-list-down .zcb-element,
.bookings-field-theme.bookings-field-theme-guest>.label-container:nth-child(2) .zcp-dropdown.popup-up-open .selected-list-down .zcb-element {
    bottom: inherit;
    box-shadow: 0 3px 8px #a5a5a540
}

.bookings-field-theme.bookings-field-theme-guest>.label-container:nth-child(1) .zcp-dropdown.popup-up-open .dropdown-search,
.bookings-field-theme.bookings-field-theme-guest>.label-container:nth-child(2) .zcp-dropdown.popup-up-open .dropdown-search {
    border-top: none;
    bottom: inherit
}

.bookings-field-theme.bookings-field-theme-guest>.label-container:nth-child(1) .zcp-dropdown.popup-up-open .selected-list-down.zcb-drop-down-search .zcb-element,
.bookings-field-theme.bookings-field-theme-guest>.label-container:nth-child(2) .zcp-dropdown.popup-up-open .selected-list-down.zcb-drop-down-search .zcb-element {
    padding-top: 38px
}

.zb-common-signup-popup .booking-info-tab .zb-btone-ap-signin {
    text-align: right !important
}

.zb-sign-up-page .zb-payment-deposit>div>div .txt-input.txt-input,
.zb-sign-up-page .zb-payment-details {
    border-color: #E1E1E1 !important
}

.zb-sign-up-page .zb-payment-details .label-container>div,
.zb-sign-up-page .zb-payment-details .label-container>div .radio-group label {
    color: #444 !important
}

.zb-sign-up-page .zb-payment-details .label-container>div .radio-group {
    flex-direction: column
}

.zb-sign-up-page .zb-payment-details .label-container>div .radio-group>div {
    margin-right: 0 !important
}

.zb-sign-up-page .zb-payment-details .label-container>div .radio-group>div:first-child {
    margin-bottom: 10px !important
}

.zb-sign-up-page .zb-payment-details .zb-payment-deposit>div>div {
    color: #5b6572 !important
}

@media only screen and (max-width:1024px) {

    .zb-invoice-summary-one .zb-line-loading,
    .zb-line-loading {
        top: 0 !important
    }

    .zb-invoice-summary-one .book-container .book-inner-container {
        margin: 92px auto 0
    }

    .template-one-embed.book-container {
        height: 100vh
    }

    .header-container {
        padding: 7px 15px !important
    }

    .week-box-popup .date-list {
        margin: 0 !important
    }

    .week-box-popup .next-state,
    .week-box-popup .prev-state {
        width: 28px !important;
        height: 32px !important;
        padding: 10px 6px !important
    }

    input[type=email],
    input[type=tel],
    input[type=text],
    textarea {
        -webkit-appearance: initial
    }

    .error-page-container.error-page-container {
        width: 80% !important
    }
}

@media only screen and (min-width:768px) and (max-width:1024px) {

    .staff-booking-container.staff-booking-container,
    .staff-booking-detailspage.staff-booking-detailspage,
    .staff-booking-innner.staff-booking-innner {
        height: 100% !important
    }

    .staff-booking-container.staff-booking-container {
        padding-bottom: 10px !important
    }

    .staff-booking-detailspage.staff-booking-detailspage {
        padding: 8px 15px 15px !important
    }

    .popup-summary.reschedule-popup {
        width: 100% !important
    }

    .popup-summary.reschedule-popup .appointment-content {
        height: calc(100% - 170px) !important
    }

    .popup-summary.reschedule-popup .reschedule-buttons {
        bottom: 63px;
        position: fixed !important
    }

    .zb-invoice-summary-one .zb-line-loading {
        top: 80px !important
    }

    .zcb-date-picker.zcb-date-picker-week-box {
        width: 576px !important
    }

    .zb-invoice-summary-one .book-inner-container .summary-list {
        padding: 50px 35px
    }

    .book-container .header {
        background-color: #FFF !important
    }

    .ipad-view-hide {
        display: none
    }

    .zb-invoice-summary-one .book-inner-container .summary-list>.pos-abs {
        right: 23px !important
    }

    .booking-slot-group {
        max-height: 300px !important
    }
}

@media only screen and (max-width:767px) {

    .booking-info-container .label-container>div:last-child .inputbox,
    .customer-appointment-container .customer-appointment-cost>span>div:last-child {
        width: 100%
    }

    .booknow-class-availability-date .text-muted,
    .zb-invoice-summary-one .book-container .book-inner-container .summary-list .label-container:after,
    .zb-invoice-summary-one .zb-print {
        display: none
    }

    .header .booknow-signin-element {
        max-width: 0
    }

    .popup-summary .appointment-content .appointment-reschedule-date,
    .popup-summary .appointment-content>div:first-child,
    .popup-summary .book-timing-container .selected-staff>div {
        flex-direction: column
    }

    .popup-summary .appointment-content .appointment-reschedule-date>div,
    .popup-summary .book-timing-container .selected-staff>div>div:first-child {
        width: 100% !important;
        margin-bottom: 10px
    }

    .popup-summary .appointment-content .appointment-reschedule-date>div>div>div {
        flex: 1 !important
    }

    .popup-summary .booking-slot-group {
        margin-left: 15px !important;
        max-height: 300px
    }

    .popup-summary .staff-list {
        width: 100%
    }

    .zb-invoice-summary-one .popup-summary.reschedule-popup {
        width: 100% !important;
        height: 100% !important
    }

    .zb-invoice-summary-one .cancel-alert.cancel-popup.cancel-alert.cancel-popup {
        width: calc(100% - 20px) !important
    }

    .zb-invoice-summary-one .slot-group-header>div:first-child {
        position: absolute;
        top: -30px
    }

    .zb-invoice-summary-one .book-timing-container {
        padding-top: 20px
    }

    .zb-invoice-summary-one .book-timing-container .selected-staff {
        padding-top: 0;
        margin-left: 15px;
        margin-right: 15px;
        border-bottom: none
    }

    .zb-invoice-summary-one .book-inner-container .steps ul li {
        min-height: 0
    }

    .zb-invoice-summary-one .header {
        border-bottom: 1px solid #E0E0E0;
        min-width: inherit
    }

    .zb-invoice-summary-one .header .bookingpage-logo {
        min-height: 50px
    }

    .zb-invoice-summary-one .book-container .book-inner-container {
        margin: 120px auto 0;
        height: 100%
    }

    .zb-invoice-summary-one .book-container .book-inner-container .summary-list {
        padding: 50px 26px
    }

    .zb-invoice-summary-one .book-container .book-inner-container .summary-list .label-container,
    .zb-invoice-summary-one .book-container .book-inner-container .summary-list .summary-buttons {
        flex-direction: column
    }

    .zb-invoice-summary-one .book-container .book-inner-container .summary-list .label-container .value {
        align-self: flex-start;
        margin-top: 15px;
        margin-left: 23px
    }

    .zb-invoice-summary-one .book-container .book-inner-container .summary-list .summary-buttons .link-button {
        margin-right: 0 !important;
        margin-bottom: 10px;
        width: 100%
    }

    .zb-invoice-summary-one .select-time-zone {
        width: 100%;
        max-width: 100%
    }

    .time-slot-popup.staff-select-box.time-select-box {
        top: -40px
    }

    .booking-info-container .label-container {
        flex-direction: column;
        min-height: inherit
    }

    .bca-available-date,
    .bca-available-date .bca-recurring-date>span,
    .bca-staff-alocated,
    .booknow-class-availability-date {
        flex-direction: column
    }

    .booking-info-container .label-container>div {
        margin-bottom: 10px;
        height: auto !important;
        max-width: initial;
        width: 100%
    }

    .booking-info-container .label-container>div:first-child {
        height: 22px;
        padding-top: 0
    }

    .staff-booking-container {
        height: calc(100vh - 110px) !important
    }

    .booknow-class-availability {
        margin-right: 0 !important;
        border: none;
        padding: 17px 13px 0 !important
    }

    .booknow-class-availability .service-image {
        width: 45px !important;
        height: 45px !important;
        line-height: 45px !important;
        font-size: 14px;
        margin-right: 15px
    }

    .booknow-class-availability .booknow-class-availability-service {
        font-size: 14px !important
    }

    .booknow-class-availability .booknow-class-availability-date {
        font-size: 11px !important;
        color: #666;
        font-weight: 400
    }

    .bca-recurring-date,
    .bca-staff-alocated .bca-staff-header {
        align-self: flex-start !important;
        margin-bottom: 15px
    }

    .bca-staff-alocated .bca-staff-details .staff-list {
        width: 100%
    }

    .staff-select-box.booknow-class-popup {
        width: calc(100% - 20px) !important
    }

    .booknow-class-popup .booknow-class-popup-content {
        padding: 0 !important;
        max-height: 300px
    }

    .booknow-class-popup .booknow-class-popup-content .bca-header {
        font-size: 13px !important
    }

    .summary-book-button {
        width: 100%
    }

    .reschedule-popup .zb-reschedule-service {
        padding-left: 0 !important
    }

    .reschedule-popup .zb-reschedule-bookingid,
    .reschedule-popup .zb-reschedule-staff {
        margin-top: 15px
    }

    .reschedule-popup .appointment-content .appointment-reschedule-date,
    .reschedule-popup .book-timing-container .selected-staff,
    .reschedule-popup .zb-reschedule-header-text {
        margin-left: 0 !important
    }

    .reschedule-popup .book-timing-container .selected-staff {
        height: auto
    }

    .reschedule-popup .book-timing-container .selected-staff>div,
    .reschedule-popup .select-slot .slot-group-header,
    .reschedule-popup.popup-summary .booking-slot-group {
        margin-left: 10px !important
    }

    .reschedule-popup .book-timing-container .selected-staff>div .selected-staff-booknow {
        position: relative
    }

    .sign-in-iframe .signin-iframe-parent iframe,
    .signin-iframe-parent {
        width: 100% !important
    }

    .signin-iframe-parent {
        padding: 0 8px 0 0
    }

    .booknow-class-popup .booknow-class-popup-content.booknow-class-popup-content .bca-header.bca-header {
        font-size: 9px !important
    }

    .booknow-class-popup .bca-header {
        padding: 17px 10px
    }

    .bca-available-date .bca-recurring-date>span .bca-weekdays,
    .booknow-class-availability-date .booknow-starting-date {
        margin-bottom: 5px;
        margin-top: 5px
    }

    .bca-available-date .bca-recurring-date>span .font-weight-600 {
        margin-left: 10px
    }

    .zb-resource-choosetime>span {
        padding: 18px 5px;
        width: 147px;
        white-space: nowrap
    }

    .reschedule-popup .slot-group-header {
        flex-direction: column;
        margin-right: 0 !important
    }

    .reschedule-popup .slot-group-header>div {
        width: 100%
    }

    .reschedule-popup .slot-group-header>div:first-child {
        margin-bottom: 10px
    }

    .reschedule-popup .booking-slot-group {
        max-height: none
    }

    .reschedule-popup .reschedule-buttons {
        bottom: 0 !important
    }

    .reschedule-popup .appointment-content {
        height: calc(100% - 108px) !important
    }

    .reschedule-popup .appointment-reschedule-date .zcb-date-picker-top-right .zcb-date-picker-content {
        top: 42% !important;
        left: 20px !important;
        transform: translate(0, -50%) !important;
        position: fixed
    }

    .booking-info-container .bookings-field-container .label-container .input-box {
        align-self: flex-start
    }

    .zb-line-loading,
    .zb-line-loading .zb-break-animation,
    .zb-line-loading .zb-line {
        height: 2px !important
    }

    .header-container {
        padding: 7px 8px !important
    }

    .error-page-container.error-page-container {
        width: calc(100% - 10px) !important;
        top: 42% !important
    }

    .customer-login-page .search-box input {
        border: 1px solid #EFEFEF !important
    }

    .booknow-header-image {
        padding: 10px;
        border-bottom: 1px solid #E6E6E6;
        background-color: #FFF
    }

    .bookingpage-logo {
        max-height: 30px
    }

    .bookings-field-container .sign-up-popup,
    .customerpage-myinfo-container,
    .customerpage-myinfo-container>div>div {
        width: 100%
    }

    .booknow-signin-element .customerpage-myinfo-container,
    .mobile-view-hide {
        display: none !important
    }

    .signup-container .signup-content {
        background-color: transparent;
        width: 100% !important;
        padding: 50px 0 50px 10px !important;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        top: 25px;
        transform: translate(-50%, 0)
    }

    .signup-container:after {
        background: 0 0 !important
    }

    .signup-container .booknow-header {
        color: #666 !important
    }

    .signup-container-visible .signup-container {
        background: #FFF
    }

    .booking-info-container .bookings-field-theme .label-container>div {
        margin-bottom: 0
    }

    .booking-info-container-details {
        padding-left: 0
    }

    .booking-info-container-details .login-customer-info .zb-payment-details.zb-payment-details-signin .label-container>div:first-child {
        width: auto
    }

    .booknow-signin-element .customer-appointment-button.normal-button {
        position: fixed;
        white-space: nowrap;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #7753AD;
        color: #FFF;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        padding: 12px;
        font-weight: 600;
        font-size: 16px
    }

    .zb-invoice-summary-one .book-container .book-inner-container .summary-list .label-container .value {
        width: 100%
    }

    .zb-summary-meeting-link {
        width: 100%;
        margin: 10px 0 0 45px
    }

    .zcb-bookings-page-embed .template-one-container .zb-btone-content,
    .zcb-bookings-page-embed .template-one-container .zb-btone-inner-container {
        height: 100vh !important
    }

    .tooltip-element {
        left: 15px !important
    }
}

@media only screen and (max-width:450px) {

    .zb-payment-details-signin .label-container.zb-payment-deposit,
    .zb-payment-details-signin .label-container.zb-payment-radio-button {
        flex-direction: column !important
    }

    .zb-payment-details-signin .label-container.zb-payment-deposit>div:first-child,
    .zb-payment-details-signin .label-container.zb-payment-radio-button>div:first-child {
        margin-bottom: 10px;
        width: 100%;
        margin-right: 0
    }
}

@media only screen and (max-width:321px) {

    .zb-invoice-summary-one .cancel-alert .cancel-popup-header,
    .zb-invoice-summary-one .cancel-alert .confirm-cancel-button {
        font-size: 11px !important
    }

    .zb-invoice-summary-one .popup-summary .appointment-content {
        padding-right: 15px;
        padding-left: 20px !important
    }

    .zb-invoice-summary-one .saving {
        width: calc(100% - 15px);
        margin: 0 -132px
    }

    .zb-invoice-summary-one .appointment-reschedule-date .txt-input.disabled {
        white-space: nowrap;
        width: 124px
    }

    .zb-invoice-summary-one .appointment-reschedule-date .zcb-date-picker {
        white-space: nowrap
    }

    .zb-invoice-summary-one .reschedule-popup .book-timing-container .selected-staff>div,
    .zb-invoice-summary-one .reschedule-popup .select-slot .slot-group-header,
    .zb-invoice-summary-one .reschedule-popup.popup-summary .booking-slot-group {
        margin-left: 0 !important
    }

    .zb-invoice-summary-one .reschedule-popup .appointment-header .summary-header-right>span {
        margin-right: 0 !important
    }

    .zb-invoice-summary-one .booking-slot-group {
        padding: 10px
    }

    .zb-invoice-summary-one .ca-summary.reschedule-popup .bookings-slot-container {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        grid-gap: 10px
    }

    .zb-invoice-summary-one .value {
        width: 100%
    }

    .zb-resource-choosetime {
        font-size: 10px
    }

    .bookings-field-theme-guest .proceed-btn {
        font-size: 14px;
        padding: 10px 5px
    }

    .reschedule-popup .appointment-reschedule-date .zcb-date-picker-top-right .zcb-date-picker-content {
        width: calc(100% - 7px);
        transform: translate(-50%, -50%) !important
    }

    .reschedule-popup .appointment-reschedule-date .zcb-date-picker-top-right .zcb-date-picker-content .zcb-datepicker-table-row>.zcb-date {
        padding: 4px
    }
}

.checkbox-group>div label:after,
.template-container .booking-info-container .checkbox-default-blue label:after {
    border-color: #605798 !important
}

.font-family-auto {
    font-family: auto
}

.zb-invoice-sumary-container {
    width: 100%;
    height: calc(100vh - 40px);
    background-color: #FFF;
    overflow-y: auto;
    padding-bottom: 50px
}

.zb-invoice-sumary-container.zb-invoice-fullview {
    height: 100vh
}

.zb-invoice-sumary {
    padding-top: 6%
}

.zb-invoice-sumary .zb-iv-box {
    border: 1px solid #DCDCDC;
    padding: 35px 50px;
    width: 490px;
    margin: 50px auto 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: #FFF
}

.zb-invoice-sumary .zb-iv-box .zb-iv-calendar {
    width: 106px;
    height: 100px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/customers-engine/assets/images/invoice-calendar-c98eb67318302a188976ef2c4970d593.png);
    background-size: 100% 100%
}

.zb-invoice-sumary .zb-iv-box .zb-iv-calendar .zb-close {
    position: absolute;
    top: 44px;
    left: 38px;
    background-color: #F6F5FE;
    padding: 8px;
    z-index: 10;
    font-weight: 600;
    color: #EC342F;
    opacity: 1
}

.zb-invoice-sumary .zb-iv-box .zb-iv-service-details {
    width: calc(100% - 106px)
}

.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details {
    border: 1px solid #E1E1E1;
    padding: 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
}

.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-books-icon,
.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-iv-assist-icon,
.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-iv-gmeet-icon,
.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-iv-meeting-icon,
.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-iv-teams-icon,
.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-zoom-icon {
    width: 35px;
    height: 35px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/admin/assets/images/integration-sprite-image-0fd32325d863c1f06c29a64f90d96b8e.png);
    background-size: 454px
}

.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-iv-meeting-icon {
    background-position: -276px -37px
}

.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-iv-assist-icon {
    background-position: -277px 1px
}

.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-iv-meeting-details-field {
    width: calc(100% - 65px)
}

.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-zoom-icon {
    background-position: -158px 1px;
    background-size: 502px
}

.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-books-icon {
    background-position: -187px 2px
}

.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-iv-gmeet-icon {
    background-position: -322px 4px;
    background-size: 419px
}

.zb-invoice-sumary .zb-iv-box .zb-iv-meeting-details .zb-iv-teams-icon {
    background-position: -6px -158px;
    background-size: 477px
}

.zb-btone-bgimage,
.zb-btone-graphics,
.zb-creditcard-image,
.zb-staff-booking-brand .zb-zoho-logo {
    background-size: 100% 100%
}

.zb-invoice-sumary .zb-iv-box .zb-iv-menu {
    right: 17px;
    top: 15px;
    color: grey
}

.zb-invoice-sumary .zb-iv-box .zb-iv-menu .common-dropdown {
    left: inherit;
    transform: translate(0, 0);
    right: -13px
}

.zb-invoice-sumary .zb-iv-box .zb-iv-menu .common-dropdown:after {
    left: inherit;
    right: 12px
}

.zb-invoice-sumary .zb-iv-theme-color {
    color: #4F4790
}

.zb-invoice-sumary .zb-iv-book-appointent {
    max-width: 500px;
    margin: 40px auto 0
}

.zb-invoice-sumary .zb-iv-book-appointent>span {
    padding-right: 23px
}

.zb-invoice-sumary .zb-iv-book-appointent>span:hover>span {
    right: -4px
}

.zb-invoice-sumary .zb-iv-book-appointent>span>span {
    right: 0;
    top: 3px;
    transition: all .3s
}

.zb-invoice-sumary .zb-iv-signup {
    margin-top: 6%
}

.zb-invoice-sumary .zb-iv-signup .zb-iv-signup-input {
    border: 1px solid #DCDCDC;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden
}

.zb-invoice-sumary .zb-iv-signup .zb-iv-signup-input input {
    min-width: 300px
}

.zb-invoice-sumary .zb-iv-signup .zb-iv-signup-input input:focus {
    outline: 0 !important;
    border: none !important
}

.zb-staff-booking-brand {
    height: 40px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #FFF;
    -webkit-box-shadow: 2px 0 14px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 2px 0 14px 0 rgba(0, 0, 0, .1);
    box-shadow: 2px 0 14px 0 rgba(0, 0, 0, .1)
}

.zb-staff-booking-brand .zb-zoho-logo {
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/assets/images/Zoho-logo-43f935513df85d5d318b423a8655ec46.svg);
    width: 40px;
    height: 16px
}

.animation-shapes {
    position: absolute;
    background-repeat: no-repeat;
    z-index: 99;
    top: 0;
    left: 0
}

.fireworks-animation-hide {
    opacity: 0;
    visibility: hidden
}

.fireworks-animation-show {
    left: 35px;
    top: 45px;
    animation: gravity 1.2s ease-in backwards
}

@keyframes gravity {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translateY(250px)
    }
}

.setup-animation.fireworks-animation-show .shapes-1 {
    animation: gravity1 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-2 {
    animation: gravity2 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-3 {
    animation: gravity3 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-4 {
    animation: gravity4 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-5 {
    animation: gravity5 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-6 {
    animation: gravity6 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-7 {
    animation: gravity7 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-8 {
    animation: gravity8 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-9 {
    animation: gravity9 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-10 {
    animation: gravity10 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-11 {
    animation: gravity11 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-12 {
    animation: gravity12 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-13 {
    animation: gravity13 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-14 {
    animation: gravity14 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-15 {
    animation: gravity15 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-16 {
    animation: gravity16 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-17 {
    animation: gravity17 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-18 {
    animation: gravity18 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-19 {
    animation: gravity19 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-20 {
    animation: gravity20 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-21 {
    animation: gravity21 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-22 {
    animation: gravity22 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-23 {
    animation: gravity23 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-24 {
    animation: gravity24 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-25 {
    animation: gravity25 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-26 {
    animation: gravity26 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-27 {
    animation: gravity27 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-28 {
    animation: gravity28 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-29 {
    animation: gravity29 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-30 {
    animation: gravity30 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-31 {
    animation: gravity31 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-32 {
    animation: gravity32 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-33 {
    animation: gravity33 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-34 {
    animation: gravity34 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-35 {
    animation: gravity35 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-36 {
    animation: gravity36 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-37 {
    animation: gravity37 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-38 {
    animation: gravity38 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-39 {
    animation: gravity39 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-40 {
    animation: gravity40 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-41 {
    animation: gravity41 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-42 {
    animation: gravity42 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-43 {
    animation: gravity43 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-44 {
    animation: gravity44 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-45 {
    animation: gravity45 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-46 {
    animation: gravity46 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-47 {
    animation: gravity47 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-48 {
    animation: gravity48 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-49 {
    animation: gravity49 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-50 {
    animation: gravity50 1.2s ease-out backwards
}

.setup-animation.fireworks-animation-show .shapes-51 {
    animation: gravity51 1.2s ease-out backwards
}

@keyframes gravity1 {
    100% {
        top: -146.67px;
        left: 223px
    }
}

@keyframes gravity2 {
    100% {
        left: -104px;
        top: -.67px
    }
}

@keyframes gravity3 {
    100% {
        left: -218px;
        top: -279.67px
    }
}

@keyframes gravity4 {
    100% {
        left: -144px;
        top: -214.67px
    }
}

@keyframes gravity5 {
    100% {
        left: -197px;
        top: 63.33px
    }
}

@keyframes gravity6 {
    100% {
        left: 132px;
        top: -94.67px
    }
}

@keyframes gravity7 {
    100% {
        left: 204px;
        top: -103.67px
    }
}

@keyframes gravity8 {
    100% {
        left: 221px;
        top: -55.67px
    }
}

@keyframes gravity9 {
    100% {
        left: -63px;
        top: -209.67px
    }
}

@keyframes gravity10 {
    100% {
        left: 209px;
        top: 41.33px
    }
}

@keyframes gravity11 {
    100% {
        left: 31px;
        top: -118.67px
    }
}

@keyframes gravity12 {
    100% {
        left: -83px;
        top: -273.67px
    }
}

@keyframes gravity13 {
    100% {
        left: -103px;
        top: -161.67px
    }
}

@keyframes gravity14 {
    100% {
        left: -25px;
        top: -357.67px
    }
}

@keyframes gravity15 {
    100% {
        left: -137px;
        top: -93.67px
    }
}

@keyframes gravity16 {
    100% {
        left: -3px;
        top: -90.67px
    }
}

@keyframes gravity17 {
    100% {
        left: 235px;
        top: -262.67px
    }
}

@keyframes gravity18 {
    100% {
        left: -80px;
        top: -54.67px
    }
}

@keyframes gravity19 {
    100% {
        left: -222px;
        top: -240.67px
    }
}

@keyframes gravity20 {
    100% {
        left: 78px;
        top: -258.67px
    }
}

@keyframes gravity21 {
    100% {
        left: 139px;
        top: -362.67px
    }
}

@keyframes gravity22 {
    100% {
        left: -52px;
        top: -85.67px
    }
}

@keyframes gravity23 {
    100% {
        left: 8px;
        top: 42.33px
    }
}

@keyframes gravity24 {
    100% {
        left: 37px;
        top: 27.33px
    }
}

@keyframes gravity25 {
    100% {
        left: 250px;
        top: -336.67px
    }
}

@keyframes gravity26 {
    100% {
        left: -55px;
        top: -375.67px
    }
}

@keyframes gravity27 {
    100% {
        left: -103px;
        top: -43.67px
    }
}

@keyframes gravity28 {
    100% {
        left: -12px;
        top: 9.33px
    }
}

@keyframes gravity29 {
    100% {
        left: 215px;
        top: -243.67px
    }
}

@keyframes gravity30 {
    100% {
        left: 62px;
        top: -397.67px
    }
}

@keyframes gravity31 {
    100% {
        left: -46px;
        top: 69.33px
    }
}

@keyframes gravity32 {
    100% {
        left: -13px;
        top: 47.33px
    }
}

@keyframes gravity33 {
    100% {
        left: 190px;
        top: -376.67px
    }
}

@keyframes gravity34 {
    100% {
        left: 37px;
        top: -2.67px
    }
}

@keyframes gravity35 {
    100% {
        left: -157px;
        top: -102.67px
    }
}

@keyframes gravity36 {
    100% {
        left: 36px;
        top: 28.33px
    }
}

@keyframes gravity37 {
    100% {
        left: -27px;
        top: -51.67px
    }
}

@keyframes gravity38 {
    100% {
        left: -96px;
        top: 70.33px
    }
}

@keyframes gravity39 {
    100% {
        left: 94px;
        top: -358.67px
    }
}

@keyframes gravity40 {
    100% {
        left: -10px;
        top: -360.67px
    }
}

@keyframes gravity41 {
    100% {
        left: 66px;
        top: -145.67px
    }
}

@keyframes gravity42 {
    100% {
        left: 74px;
        top: -290.67px
    }
}

@keyframes gravity43 {
    100% {
        left: 134px;
        top: -122.67px
    }
}

@keyframes gravity44 {
    100% {
        left: 62px;
        top: 27.33px
    }
}

@keyframes gravity45 {
    100% {
        left: -223px;
        top: -261.67px
    }
}

@keyframes gravity46 {
    100% {
        left: -171px;
        top: -355.67px
    }
}

@keyframes gravity47 {
    100% {
        left: 183px;
        top: 32.33px
    }
}

@keyframes gravity48 {
    100% {
        left: 203px;
        top: -178.67px
    }
}

@keyframes gravity49 {
    100% {
        left: 62px;
        top: -297.67px
    }
}

@keyframes gravity50 {
    100% {
        left: -8px;
        top: -7.67px
    }
}

@keyframes gravity51 {
    100% {
        left: 152px;
        top: -343.67px
    }
}

.shapes-11,
.shapes-12,
.shapes-19,
.shapes-2,
.shapes-21,
.shapes-22,
.shapes-23,
.shapes-24,
.shapes-3,
.shapes-30,
.shapes-31,
.shapes-37,
.shapes-38,
.shapes-4,
.shapes-40,
.shapes-41,
.shapes-42,
.shapes-49,
.shapes-50 {
    width: 10px;
    height: 11px
}

.shapes-15,
.shapes-32,
.shapes-43,
.shapes-5,
.shapes-51 {
    width: 30px;
    height: 30px
}

.shapes-1,
.shapes-20,
.shapes-39 {
    width: 18px;
    height: 18px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-1-f3cee58bf057c62d7119d5644686f438.svg)
}

.shapes-2,
.shapes-21,
.shapes-24,
.shapes-40 {
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-2-b457bce88cb0128bd12dfdfcc16d5c46.svg)
}

.shapes-22,
.shapes-3,
.shapes-41 {
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-3-5341797f0315b032aae96eba82d869c8.svg)
}

.shapes-23,
.shapes-4,
.shapes-42 {
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-4-533861a30bafc79da9e14ae8a5528c73.svg)
}

.shapes-43,
.shapes-5 {
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-5-000bd09d20ee395a18ef9d6bfa7ef519.svg)
}

.shapes-13,
.shapes-25,
.shapes-44,
.shapes-6 {
    width: 7px;
    height: 8px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-6-a1f27c7d1e828f43b13ad1255f58ddd6.svg)
}

.shapes-26,
.shapes-45,
.shapes-7 {
    width: 5px;
    height: 6px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-7-601fad46f465caec29095ee9af20ec1d.svg)
}

.shapes-27,
.shapes-46,
.shapes-8 {
    width: 23px;
    height: 18px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-8-5220f187edf6c3810ba9dad6c3464c5b.svg)
}

.shapes-28,
.shapes-47,
.shapes-9 {
    width: 8px;
    height: 9px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-9-01ac25ffdab6281d3bee008b1ddd6f28.svg)
}

.shapes-10,
.shapes-29,
.shapes-48 {
    width: 21px;
    height: 22px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-10-ee566b99d31662f18ffb2eb371564e11.svg)
}

.shapes-11,
.shapes-30,
.shapes-49 {
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-11-d889f161289fa8c2d0a807836c66cbe4.svg)
}

.shapes-12,
.shapes-31,
.shapes-50 {
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-12-601d96fc6905f168d4103f13daa30b35.svg)
}

.shapes-32,
.shapes-51 {
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-13-f3712a91020a03bd917819ce5f56ed2a.svg)
}

.shapes-14,
.shapes-33 {
    width: 8px;
    height: 8px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-14-576e97b44e8f25487cd0131aa3397aa2.svg)
}

.shapes-15 {
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-15-bbf6fc2de327271a6dd40373190c3cf5.svg)
}

.shapes-16,
.shapes-35 {
    width: 10px;
    height: 10px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-16-7434e09282fbc8dfdbded327f874f68a.svg)
}

.shapes-17,
.shapes-36 {
    width: 32px;
    height: 27px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-17-a321cc72857ad1467d63605223ce344d.svg)
}

.shapes-18,
.shapes-34 {
    width: 40px;
    height: 43px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-18-4ea40011d1b61a99c580e4ea790f37e8.svg)
}

.shapes-19,
.shapes-37,
.shapes-38 {
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/setup-onboarding/assets/images/animation-shapes/shape-19-8314f465902a91abedd07d7ee1f31db4.svg)
}

@media only screen and (min-width:768px) and (max-width:1024px) {

    .zb-invoice-sumary,
    .zb-invoice-sumary .zb-iv-signup {
        margin-top: 12%
    }
}

@media only screen and (max-width:767px) {
    .zb-invoice-sumary {
        padding: 34px 10px 0
    }

    .zb-invoice-sumary>div:first-child {
        line-height: 31px
    }

    .zb-invoice-sumary .zb-iv-box {
        margin: 30px auto 0;
        padding: 35px 25px;
        width: 100%
    }

    .zb-invoice-sumary .zb-iv-signup {
        margin-top: 17%
    }

    .zb-invoice-sumary .zb-iv-signup .zb-iv-signup-input {
        width: 100%;
        justify-content: flex-end
    }

    .zb-invoice-sumary .zb-iv-signup .zb-iv-signup-input input {
        min-width: inherit;
        width: 100%
    }
}

.zb-payment-loading {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #FFF;
    z-index: 99999999999;
    display: flex;
    flex-direction: column;
    padding-top: 100px
}

.zb-payment-loading>* {
    align-self: center
}

.zb-payment-loading>p {
    max-width: 360px;
    text-align: center;
    font-size: 14px;
    color: #3D3B4A;
    line-height: 22px;
    margin-top: 10px
}

.zb-payment-loading>h4 {
    font-size: 20px;
    margin-top: 20px
}

.zb-btone-date .zcb-date-picker .date-picker-focus *,
.zb-btone-timezone-dropdown .zcp-dropdown .select-drop-box *,
.zb-btone-title {
    font-family: 'BrownMedium' !important
}

.zb-creditcard-image {
    width: 100px;
    height: 84px;
    background-image: url(https://static.zohocdn.com/bookings/V9_102_1/dist/in/engines-dist/customers-engine/assets/images/credit-card-9c3eee863725e76a2a2e1f9cf522b538.svg);
    position: relative;
    transform: scale(1);
    animation: zoomLoading 2.5s cubic-bezier(0, 0, .69, .76) infinite
}

.zb-creditcard-image>span {
    position: absolute;
    height: 1.5px;
    background-color: #50497F;
    border-radius: 50px
}

.zb-creditcard-image>span.zb-pl-line-one {
    width: 22px;
    top: 45px;
    left: 9px;
    animation: cardLoading 2.5s cubic-bezier(0, 0, .78, .64) infinite
}

.zb-creditcard-image>span.zb-pl-line-two {
    width: 16px;
    top: 51px;
    left: 9px;
    animation: cardLoading 2.5s cubic-bezier(0, 0, .78, .64) .1s infinite
}

@keyframes cardLoading {
    0% {
        left: 9px
    }

    12.5% {
        left: -3px
    }

    25% {
        left: 9px
    }

    37.5% {
        left: -3px
    }

    100%,
    50%,
    75% {
        left: 9px
    }
}

@keyframes zoomLoading {

    0%,
    100%,
    50%,
    75% {
        transform: scale(1)
    }

    25% {
        transform: scale(1.08)
    }

    60% {
        transform: scale(1.03)
    }
}

.zb-btone-content {
    height: 100vh;
    z-index: 1
}

.zb-btone-container .book-container .header {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    background-color: transparent !important
}

.zb-btone-container .overlay {
    background-color: rgba(0, 0, 0, .4)
}

.zb-btone-bgimage {
    opacity: .15;
    z-index: 0
}

.zb-btone-description {
    line-height: 20px
}

.zb-btone-inner-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  padding: 0px 10% 0;
  margin: 90px auto auto;
  max-width: 1600px;
  height: calc(100% - 90px);

  /* Hide scrollbar across browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.zb-btone-inner-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}


.zb-btone-title {
    font-size: 28px
}

.zb-btone-field-icon {
    width: 90px;
    height: 70px;
    font-size: 22px;
    -webkit-border-radius: 2px 0 0 2px;
    -moz-border-radius: 2px 0 0 2px;
    border-radius: 2px 0 0 2px
}

.zb-btone-field-details {
    -webkit-border-radius: 0 2px 2px 0;
    -moz-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0
}

.zb-btone-field-details .zcb-date-picker .date-picker-focus,
.zb-btone-field-details .zcb-date-picker .date-picker-focus .txt-input {
    color: inherit
}

.zb-btone-inner-content {
    margin-top: 20px;
    flex-flow: row wrap;
    align-content: space-between;
    height: max-content
}

.zb-btone-field-arrow {
    width: 28px
}

.zb-btone-date .zcb-date-picker.zb-btone-date-picker {
    height: 90px
}

.zb-btone-date .zcb-date-picker.zb-btone-date-picker .date-picker-focus {
    height: 100%;
    background-color: transparent;
    z-index: 1;
    display: flex
}

.zb-btone-date .zcb-date-picker.zb-btone-date-picker .date-picker-focus .txt-input {
    border: none;
    align-self: center;
    padding: 0 30px 0 15px !important;
    background-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.zb-btone-date .zcb-date-picker.zb-btone-date-picker .date-picker-focus .zb-calender-2,
.zb-btone-timezone-dropdown .zcp-dropdown .zb-downarrow-4 {
    display: none
}

.zb-btone-date .zb-updown-arrow-2,
.zb-btone-timezone-dropdown .zb-updown-arrow-2 {
    z-index: 0;
    top: 50%;
    transform: translate(0, -50%);
    right: 15px
}

.zb-date-picker-not-click,
.zb-date-picker-not-click .zcb-date-picker {
    cursor: not-allowed
}

.zb-date-picker-not-click .zcb-date-picker {
    pointer-events: none
}

.zb-btone-timezone-dropdown .zcp-dropdown .select-drop-box {
    height: 90px;
    background-color: transparent;
    border: none;
    color: inherit;
    font-size: 13px;
    padding-left: 15px;
    z-index: 1
}

.zb-btone-timezone-dropdown>div,
.zb-timezone-freeze-one.zb-timezone-freeze-one {
    height: 100%
}

.zb-btone-time .zb-btone-resource-service .zcp-dropdown .selected-list-down {
    width: calc(100% + 20px)
}

.zb-btone-time .zb-btone-resource-service .zcp-dropdown .select-drop-box:focus {
    border: 1px solid transparent !important
}

.zb-btone-themeeight .zb-btone-time .zb-btone-resource-service .zcp-dropdown .select-drop-box,
.zb-btone-themeeleven .zb-btone-time .zb-btone-resource-service .zcp-dropdown .select-drop-box,
.zb-btone-themethree .zb-btone-time .zb-btone-resource-service .zcp-dropdown .select-drop-box {
    border: 1px solid #F0F0F0 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important
}

.zb-btone-timezone-dropdown .zcp-dropdown .selected-list-down {
    top: 50%;
    left: 50%;
    margin-left: -45px;
    max-height: initial;
    height: 290px;
    animation: timeZoneAnimation .3s forwards
}

@keyframes timeZoneAnimation {
    from {
        transform: translate(-50%, -40%)
    }

    to {
        transform: translate(-50%, -50%)
    }
}

.zb-btone-timezone-dropdown .zb-timezone-freeze {
    border: none;
    width: calc(100% - 15px)
}

.zb-btone-ap-service-letter,
.zb-btone-bookbutton {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px
}

.zb-btone-timezone-dropdown .zcp-dropdown .selected-list-down .zcb-element {
    height: 272px;
    max-height: initial
}

.zb-btone-timezone-dropdown .zcp-dropdown .selected-list-down .zcb-element .text-center {
    line-height: 205px
}

.zb-btone-date .zb-btone-field-details,
.zb-btone-timezone-dropdown {
    width: calc(100% - 90px)
}

.zb-btone-time .booking-slot-group {
    max-height: initial
}

.zb-btone-bookbutton {
    border-radius: 2px;
    height: 90px
}

.zb-btone-booknow-footer {
    align-items: flex-end;
    padding-bottom: 20px;
    padding-top: 25px
}

.zb-btone-booknow-footer .footer {
    margin: 0;
    padding-bottom: 0 !important
}

.zb-btone-staff .zb-staff-1 {
    font-size: 26px
}

.zb-btone-time .zb-clock,
.zb-btone-timezone .zb-clock {
    font-size: 23px
}

.zb-btone-container.zb-btone-themefour .zb-btone-bookbutton>div,
.zb-btone-container.zb-btone-themetwo .zb-btone-bookbutton>div {
    background-color: #FFF !important
}

.zb-btone-container.zb-btone-themetwo .zb-btone-bookbutton>div>span {
    color: #FF3C99 !important
}

.zb-btone-container.zb-btone-themefour .zb-btone-themesignin,
.zb-btone-container.zb-btone-themefour .zb-btone-themesignup,
.zb-btone-container.zb-btone-themetwo .zb-btone-themesignin,
.zb-btone-container.zb-btone-themetwo .zb-btone-themesignup {
    color: #FFF !important
}

.zb-btone-themethree .zb-btone-field-icon {
    border-right: 1px solid #f0f0f0
}

.zb-btone-themethree .zb-btone-inner-content .zb-btone-date,
.zb-btone-themethree .zb-btone-inner-content .zb-btone-service,
.zb-btone-themethree .zb-btone-inner-content .zb-btone-staff,
.zb-btone-themethree .zb-btone-inner-content .zb-btone-time,
.zb-btone-themethree .zb-btone-inner-content .zb-btone-timezone {
    -webkit-box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .07);
    -moz-box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .07);
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .07)
}

.zb-btone-container.zb-btone-themethree .book-container .header {
    -webkit-box-shadow: 0 1px 3px #d8d8d8 !important;
    -moz-box-shadow: 0 1px 3px #d8d8d8 !important;
    box-shadow: 0 1px 3px #d8d8d8 !important;
    background-color: rgba(255, 255, 255, .58039216) !important
}

.zb-btone-container.zb-btone-themefour .zb-btone-bookbutton>div>span {
    color: #E74E45 !important
}

.zb-btone-container.zb-btone-themefive .zb-btone-bgimage {
    opacity: .5
}

.zb-btone-container.zb-btone-themesix .booknow-header>span,
.zb-btone-container.zb-btone-themesix .footer>div,
.zb-btone-container.zb-btone-themesix .footer>div .zb-facebook,
.zb-btone-container.zb-btone-themesix .footer>div .zb-twitter,
.zb-btone-container.zb-btone-themesix .footer>div.copy-right>a,
.zb-btone-container.zb-btone-themesix .footer>div>span,
.zb-btone-container.zb-btone-themesix .zb-btone-description {
    color: #585A59 !important
}

.zb-btone-container.zb-btone-themesix .zb-btone-title {
    color: #FF5D6D !important
}

.zb-btone-container.zb-btone-themesix .zb-btone-bookbutton>div>span {
    color: #FFF
}

.zb-btone-themeeight .invoice-summary-color>span,
.zb-btone-themeeleven .invoice-summary-color>span,
.zb-btone-themesix .invoice-summary-color>span,
.zb-btone-themethree .invoice-summary-color>span {
    color: #296DE0 !important
}

.zb-btone-container.zb-btone-themeseven .zb-btone-bgimage,
.zb-btone-container.zb-btone-themesix .zb-btone-bgimage {
    opacity: 1
}

.zb-btone-themesix .booknow-signin-customername {
    color: #111 !important
}

.zb-btone-container.zb-btone-themeseven .zb-btone-title {
    color: #FF427F !important
}

.zb-btone-container.zb-btone-themeseven .zb-btone-bookbutton>div {
    background-color: #FF427F !important;
    color: #FFF !important
}

.zb-btone-themeeight .zb-btone-inner-content .zb-btone-date,
.zb-btone-themeeight . .zb-btone-service,
.zb-btone-themeeight . .zb-btone-staff,
.zb-btone-themeeight . .zb-btone-time,
.zb-btone-themeeight . .zb-btone-timezone {
    -webkit-box-shadow: 0 2px 3px 0 #e7e8e8;
    -moz-box-shadow: 0 2px 3px 0 #e7e8e8;
    box-shadow: 0 2px 3px 0 #e7e8e8
}

.zb-btone-container.zb-btone-themeeight .book-container .header,
.zb-btone-themeeleven.zb-btone-container .book-container .header {
    -webkit-box-shadow: 0 1px 3px #d8d8d8 !important;
    -moz-box-shadow: 0 1px 3px #d8d8d8 !important;
    box-shadow: 0 1px 3px #d8d8d8 !important;
    background-color: #FFF94 !important
}

.zb-btone-container.zb-btone-themeeight .zb-btone-field-icon>span>span {
    color: #FFF;
    background-color: #FF427F;
    line-height: 43px;
    -webkit-border-radius: 73px;
    -moz-border-radius: 73px;
    border-radius: 73px;
    width: 42px;
    height: 42px
}

.zb-btone-container.zb-btone-themeeight .zb-btone-field-details .zb-updown-arrow-2 {
    color: #586069 !important
}

.zb-btone-themeeight . .zb-btone-date .zb-btone-field-icon,
.zb-btone-themeeight . .zb-btone-service .zb-btone-field-icon,
.zb-btone-themeeight . .zb-btone-staff .zb-btone-field-icon,
.zb-btone-themeeight . .zb-btone-time .zb-btone-field-icon,
.zb-btone-themeeight . .zb-btone-timezone .zb-btone-field-icon {
    border-right: 1px solid #F7F3F3
}

.zb-btone-themeeight . .zb-btone-staff .zb-staff-1 {
    font-size: 22px !important
}

.zb-btone-container.zb-btone-themeeight .zb-btone-date .zb-btone-field-icon>span>span {
    font-size: 18px !important
}

.zb-btone-container.zb-btone-themeeight .zb-btone-time .zb-clock,
.zb-btone-container.zb-btone-themeeight .zb-btone-timezone .zb-clock {
    font-size: 20px !important
}

.zb-btone-themeeleven.zb-btone-container .book-container .header {
    background-color: #FFF !important
}

.zb-btone-themeeleven.zb-btone-container .zb-btone-title {
    color: #2A2A2A !important
}

.zb-btone-themeeleven .zb-btone-field-icon {
    border-right: 1px solid #F0F0F0
}

.zb-btone-themeeleven . .zb-btone-date,
.zb-btone-themeeleven .zb-btone-inner-content .zb-btone-service,
.zb-btone-themeeleven .zb-btone-inner-content .zb-btone-staff,
.zb-btone-themeeleven .zb-btone-inner-content .zb-btone-time,
.zb-btone-themeeleven .zb-btone-inner-content .zb-btone-timezone {
    border: 1px solid #EAEBED
}

/* .zb-btone-themetwelve.zb-btone-container .book-container .header {
    -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, .1) !important;
    -moz-box-shadow: 0 3px 4px rgba(0, 0, 0, .1) !important;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .1) !important
} */

.zb-btone-themetwelve.zb-btone-container .zb-btone-booknow-footer .footer>div,
.zb-btone-themetwelve.zb-btone-container .zb-btone-booknow-footer .footer>div.company-contact span,
.zb-btone-themetwelve.zb-btone-container .zb-btone-booknow-footer .footer>div.copy-right a {
    color: #181818 !important
}

.zb-btone-themetwelve.zb-btone-container .zb-btone-booknow-footer .footer.template-one-light-color>div,
.zb-btone-themetwelve.zb-btone-container .zb-btone-booknow-footer .footer.template-one-light-color>div.company-contact span,
.zb-btone-themetwelve.zb-btone-container .zb-btone-booknow-footer .footer.template-one-light-color>div.copy-right a {
    color: #FFF !important
}

.zb-btone-themetwelve.zb-btone-container .zb-btone-booknow-footer .footer>div.company-contact>a:after,
.zb-btone-themetwelve.zb-btone-container .zb-btone-booknow-footer .footer>div.company-contact>span:after {
    background-color: #181818 !important;
    opacity: .7
}

.zb-btone-themetwelve.zb-btone-container .zb-btone-booknow-footer .footer.template-one-light-color>div.company-contact>a:after,
.zb-btone-themetwelve.zb-btone-container .zb-btone-booknow-footer .footer.template-one-light-color>div.company-contact>span:after {
    background-color: #FFF !important;
    opacity: .7
}

.zb-btone-themetwelve .zb-btone-resource-service .select-drop-box:focus {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important
}

.zb-btone-ap-popup-summary {
    position: fixed;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in 0s;
    backface-visibility: hidden;
    top: 0;
    right: 0;
    width: 40%;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    z-index: 30;
    background-color: #FFF
}

.zb-btone-ap-popup-summary .zb-btone-ap-header {
    padding: 14px 20px 15px;
    background-color: #fbfbfb;
    border-bottom: 1px solid #f4f4f4
}

.zb-btone-ap-popup-summary.open {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
    transform: translateX(0)
}

.zb-btone-container .zb-btone-ap-container {
    background-color: #FAFBFD;
    padding: 20px 30px;
    height: calc(100vh - 54px);
    overflow-y: auto
}

.zb-btone-ap-content {
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .08);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .08);
    padding: 13px;
    background-color: #FFF
}

.zb-btone-ap-service-letter {
    width: 50px;
    height: 50px;
    border-radius: 2px;
    font-size: 20px
}

.zb-btone-ap-appointment-icon,
.zb-btone-ap-staff-icon,
.zb-btone-ap-timezone-icon {
    height: 40px;
    width: 40px
}

.zb-btone-ap-staff-icon {
    font-size: 25px
}

.zb-btone-ap-appointment-icon {
    font-size: 23px
}

.zb-btone-ap-timezone-icon {
    font-size: 22px
}

.zb-btone-ap-changebutton {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 56px;
    height: 21px
}

.zb-btone-ap-changebutton .zb-btone-ap-changetext {
    z-index: 1;
    color: #3C3C3C
}

.zb-btone-ap-changebuttonbg {
    opacity: .2
}

.zb-btone-ap-signin>span {
    color: #828282
}

.zb-btone-themeone .zb-btone-ap-signin>span.active {
    color: #1355A2
}

.zb-btone-themetwo .zb-btone-ap-signin>span.active {
    color: #B1346F
}

.zb-btone-themethree .zb-btone-ap-signin>span.active {
    color: #27D8A1
}

.zb-btone-themefour .zb-btone-ap-signin>span.active {
    color: #EB2826
}

.zb-btone-themefive .zb-btone-ap-signin>span.active {
    color: #3F3F3F
}

.zb-btone-themesix .zb-btone-ap-signin>span.active {
    color: #FF5D6D
}

.zb-btone-themeseven .zb-btone-ap-signin>span.active {
    color: #3122AE
}

.zb-btone-themeeight .zb-btone-ap-signin>span.active {
    color: #FF427F
}

.zb-btone-themenine .zb-btone-ap-signin>span.active {
    color: #023CD5
}

.zb-btone-themeten .zb-btone-ap-signin>span.active {
    color: #07786B
}

.zb-btone-themeeleven .zb-btone-ap-signin>span.active {
    color: #F84F7B
}

.zb-btone-ap-bookinginfo.done,
.zb-btone-ap-bookinginfo.zb-login-customer-details,
.zb-btone-ap-payment {
    background-color: #FAFBFD
}

.template-one-container.zb-btone-container .zb-btone-ap-payment {
    padding-top: 55px !important
}

.zb-btone-ap-bookinginfo>div {
    width: 100% !important
}

.zb-btone-ap-bookinginfo .booking-info-container .label-container>div:last-child {
    max-width: inherit
}

.zb-btone-ap-bookinginfo .iti {
    display: flex;
    height: 38px
}

.template-one-container .booknow-class-availability .booknow-class-availability-continue,
.template-one-container.zb-invoice-summary-one .zb-btone-themesignup:before,
.zb-btone-ap-bookinginfo .booking-info-container .booking-info-tab>div:first-child,
.zb-btone-ap-series-service .booknow-class-availability:after {
    display: none
}

.zb-btone-ap-bookinginfo .iti .iti__flag-container {
    position: initial
}

.zb-btone-ap-bookinginfo .iti .iti__country-list {
    right: 0;
    left: 0;
    top: 38px
}

.zb-btone-ap-bookinginfo .booking-info-container .iti input {
    position: absolute
}

.zb-btone-ap-bookinginfo .booking-info-container .input-bg-color .iti input {
    background-color: #FFF;
    border: 1px solid #E1E1E1
}

.zb-btone-ap-bookinginfo .booking-info-container {
    padding-top: 30px;
    padding-bottom: 0 !important
}

.zb-btone-ap-bookinginfo .sign-in-iframe {
    margin-top: 15px
}

.zb-btone-ap-bookinginfo .service-header,
.zb-btone-ap-bookinginfo .zb-btone-ap-payment .service-header {
    margin-bottom: 0 !important;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    padding: 13px 13px 13px 20px;
    background-color: #FFF
}

.header-title {
    border-bottom: 1px solid #e4e6e6
}

.header-title h1 {
    color: #333;
    font-size: 39px;
    line-height: 45px
}

.zb-btone-ap-series-service>div {
    width: 100%
}

.zb-btone-ap-series-service .booknow-class-availability {
    background-color: transparent;
    margin-bottom: 0 !important
}

.zb-btone-ap-bookinginfo .booking-info-container .input-bg-color input {
    background-color: #F5F7FA;
    border: 1px solid #F5F7FA;
    color: #8E9196
}

.zb-btone-ap-bookinginfo .booking-info-container .input-bg-color input:focus {
    background-color: #FFF;
    border: 1px solid #8E8DBE;
    color: #111
}

.zb-invoice-summary-one.template-one-container .book-container .header {
    -webkit-box-shadow: 0 1px 3px #d8d8d8 !important;
    -moz-box-shadow: 0 1px 3px #d8d8d8 !important;
    box-shadow: 0 1px 3px #d8d8d8 !important;
    background-color: #FFF !important
}

.zb-invoice-summary-one.template-one-container .book-container .header .booknow-header>span,
.zb-invoice-summary-one.template-one-container .zb-btone-themesignin,
.zb-invoice-summary-one.template-one-container .zb-btone-themesignup {
    color: inherit !important
}

.zb-invoice-summary-one.template-one-container .zb-btone-themesignup {
    background-color: inherit !important;
    font-size: 12px;
    position: relative
}

.zb-invoice-summary-one.template-one-container .zb-btone-themesignup:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 12px;
    background-color: #CCC;
    left: -5px;
    top: 5px
}

.zb-btone-container .header-signup-btn .proceed-btn {
    top: 8px
}

.zb-btone-themefive .radio-group input[type=radio]:checked+label::before,
.zb-btone-themenine .radio-group input[type=radio]:checked+label::before,
.zb-btone-themeone .radio-group input[type=radio]:checked+label::before,
.zb-btone-themeten .radio-group input[type=radio]:checked+label::before {
    box-shadow: #FFC900 0 0 0 1px inset, #FFF 0 0 0 7px inset, #FFC900 0 0 0 12px inset, transparent 0 0 0 24px
}

.zb-btone-themefive .radio-group input[type=radio]+label:active::before,
.zb-btone-themenine .radio-group input[type=radio]+label:active::before,
.zb-btone-themeone .radio-group input[type=radio]+label:active::before,
.zb-btone-themeten .radio-group input[type=radio]+label:active::before {
    box-shadow: transparent 0 0 0 0 inset, transparent 0 0 0 0 inset, #FFC900 0 0 0 1px inset, rgba(255, 200, 1, .2) 0 0 0 24px
}

.zb-btone-themetwo .radio-group input[type=radio]:checked+label::before {
    box-shadow: #FF3C99 0 0 0 1px inset, #FFF 0 0 0 7px inset, #FF3C99 0 0 0 12px inset, transparent 0 0 0 24px
}

.zb-btone-themetwo .radio-group input[type=radio]+label:active::before {
    box-shadow: transparent 0 0 0 0 inset, transparent 0 0 0 0 inset, #FF3C99 0 0 0 1px inset, rgba(255, 60, 153, .13) 0 0 0 24px
}

.zb-btone-themethree .radio-group input[type=radio]:checked+label::before {
    box-shadow: #27D8A1 0 0 0 1px inset, #FFF 0 0 0 7px inset, #27D8A1 0 0 0 12px inset, transparent 0 0 0 24px
}

.zb-btone-themethree .radio-group input[type=radio]+label:active::before {
    box-shadow: transparent 0 0 0 0 inset, transparent 0 0 0 0 inset, #27D8A1 0 0 0 1px inset, rgba(40, 216, 161, .17) 0 0 0 24px
}

.zb-btone-themefour .radio-group input[type=radio]:checked+label::before {
    box-shadow: #E74E45 0 0 0 1px inset, #FFF 0 0 0 7px inset, #E74E45 0 0 0 12px inset, transparent 0 0 0 24px
}

.zb-btone-themefour .radio-group input[type=radio]+label:active::before {
    box-shadow: transparent 0 0 0 0 inset, transparent 0 0 0 0 inset, #E74E45 0 0 0 1px inset, rgba(231, 78, 69, .15) 0 0 0 24px
}

.zb-btone-themeeleven .radio-group input[type=radio]:checked+label::before,
.zb-btone-themesix .radio-group input[type=radio]:checked+label::before {
    box-shadow: #FF5D6D 0 0 0 1px inset, #FFF 0 0 0 7px inset, #FF5D6D 0 0 0 12px inset, transparent 0 0 0 24px
}

.zb-btone-themeeleven .radio-group input[type=radio]+label:active::before,
.zb-btone-themesix .radio-group input[type=radio]+label:active::before {
    box-shadow: transparent 0 0 0 0 inset, transparent 0 0 0 0 inset, #FF5D6D 0 0 0 1px inset, rgba(255, 93, 109, .13) 0 0 0 24px
}

.zb-btone-themeeight .radio-group input[type=radio]:checked+label::before,
.zb-btone-themeseven .radio-group input[type=radio]:checked+label::before {
    box-shadow: #FF427F 0 0 0 1px inset, #FFF 0 0 0 7px inset, #FF427F 0 0 0 12px inset, transparent 0 0 0 24px
}

.zb-btone-themeeight .radio-group input[type=radio]+label:active::before,
.zb-btone-themeseven .radio-group input[type=radio]+label:active::before {
    box-shadow: transparent 0 0 0 0 inset, transparent 0 0 0 0 inset, #FF427F 0 0 0 1px inset, rgba(255, 65, 127, .18) 0 0 0 24px
}

.zb-btone-themefive .checkbox-default-blue label::after,
.zb-btone-themefive .checkbox-default-blue.checked label::before,
.zb-btone-themefive .checkbox-group input+label.active:before,
.zb-btone-themefive .checkbox-group input:focus+label:before,
.zb-btone-themefive .checkbox-group>div label:after,
.zb-btone-themenine .checkbox-default-blue label::after,
.zb-btone-themenine .checkbox-default-blue.checked label::before,
.zb-btone-themenine .checkbox-group input+label.active:before,
.zb-btone-themenine .checkbox-group input:focus+label:before,
.zb-btone-themenine .checkbox-group>div label:after,
.zb-btone-themeone .checkbox-default-blue label::after,
.zb-btone-themeone .checkbox-default-blue.checked label::before,
.zb-btone-themeone .checkbox-group input+label.active:before,
.zb-btone-themeone .checkbox-group input:focus+label:before,
.zb-btone-themeone .checkbox-group>div label:after,
.zb-btone-themeten .checkbox-default-blue label::after,
.zb-btone-themeten .checkbox-default-blue.checked label::before,
.zb-btone-themeten .checkbox-group input+label.active:before,
.zb-btone-themeten .checkbox-group input:focus+label:before,
.zb-btone-themeten .checkbox-group>div label:after {
    border-color: #FFC900 !important
}

.zb-btone-themetwo .checkbox-default-blue label::after,
.zb-btone-themetwo .checkbox-default-blue.checked label::before,
.zb-btone-themetwo .checkbox-group input+label.active:before,
.zb-btone-themetwo .checkbox-group input:focus+label:before,
.zb-btone-themetwo .checkbox-group>div label:after {
    border-color: #FF3C99 !important
}

.zb-btone-themethree .checkbox-default-blue label::after,
.zb-btone-themethree .checkbox-default-blue.checked label::before,
.zb-btone-themethree .checkbox-group input+label.active:before,
.zb-btone-themethree .checkbox-group input:focus+label:before,
.zb-btone-themethree .checkbox-group>div label:after {
    border-color: #27D8A1 !important
}

.zb-btone-themefour .checkbox-default-blue label::after,
.zb-btone-themefour .checkbox-default-blue.checked label::before,
.zb-btone-themefour .checkbox-group input+label.active:before,
.zb-btone-themefour .checkbox-group input:focus+label:before,
.zb-btone-themefour .checkbox-group>div label:after {
    border-color: #E74E45 !important
}

.zb-btone-themeeleven .checkbox-default-blue label::after,
.zb-btone-themeeleven .checkbox-default-blue.checked label::before,
.zb-btone-themeeleven .checkbox-group input+label.active:before,
.zb-btone-themeeleven .checkbox-group input:focus+label:before,
.zb-btone-themeeleven .checkbox-group>div label:after,
.zb-btone-themesix .checkbox-default-blue label::after,
.zb-btone-themesix .checkbox-default-blue.checked label::before,
.zb-btone-themesix .checkbox-group input+label.active:before,
.zb-btone-themesix .checkbox-group input:focus+label:before,
.zb-btone-themesix .checkbox-group>div label:after {
    border-color: #FF5D6D !important
}

.zb-btone-themeeight .checkbox-default-blue label::after,
.zb-btone-themeeight .checkbox-default-blue.checked label::before,
.zb-btone-themeeight .checkbox-group input+label.active:before,
.zb-btone-themeeight .checkbox-group input:focus+label:before,
.zb-btone-themeeight .checkbox-group>div label:after,
.zb-btone-themeseven .checkbox-default-blue label::after,
.zb-btone-themeseven .checkbox-default-blue.checked label::before,
.zb-btone-themeseven .checkbox-group input+label.active:before,
.zb-btone-themeseven .checkbox-group input:focus+label:before,
.zb-btone-themeseven .checkbox-group>div label:after {
    border-color: #FF427F !important
}

.staff-select-box .staff-images {
    width: 29px;
    height: 29px
}

.staff-select-box.time-select-box {
    min-width: 120px;
    left: 50%
}

.staff-select-box.time-select-box>div {
    font-size: 12px;
    padding: 8px 20px;
    text-align: left
}

.time-slot-popup.staff-select-box.time-select-box,
.time-slot-popup.staff-select-box.time-select-box>div {
    padding: 0
}

.time-slot-popup.staff-select-box.time-select-box .booking-slot-group {
    margin: 0 !important;
    height: 100%
}

.time-slot-popup.staff-select-box.time-select-box .booking-slot-group .slot-group,
.time-slot-popup.staff-select-box.time-select-box .booking-slot-group .slot-title,
.time-slot-popup.staff-select-box.time-select-box .booking-slot-group>ul {
    display: block !important
}

.time-slot-popup.staff-select-box.time-select-box .booking-slot-group .slot-title {
    margin-bottom: 10px
}

.time-slot-popup.staff-select-box.time-select-box {
    min-width: 330px;
    border: none;
    max-height: 313px
}

.zb-btone-service .staff-select-box,
.zb-btone-staff .staff-select-box {
    min-width: 330px;
    max-height: 313px
}

.resource-select-box .description-field-view {
    max-height: calc(1rem * 2);
    line-height: 16px
}

.resource-select-box .staff-images {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.book-bottom-button {
    bottom: 18px;
    padding: 18px 30px 0;
    border-top: 1px solid #EAEBED;
    background-color: #FFF
}

.book-cancel-btn,
.book-save-btn {
    width: calc(50% - 12px);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
}

.book-save-btn {
    color: #fff;
    background-color: #52518f;
    border: 2px solid #52518f
}

.book-cancel-btn {
    color: #111;
    background-color: #f5f5f5;
    border: 2px solid #e2e2e2
}

.summaryicon-bg {
    background: #fd9a02;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

.service-letter {
    width: 45px;
    height: 45px;
    font-size: 14px;
    line-height: 43px
}

.book-appointment-summary .service-letter {
    line-height: 40px
}

.service-popup-letter {
    width: 30px;
    height: 30px;
    font-size: 12px;
    line-height: 28px
}

.template-one-container.zb-invoice-summary-one .zcb-date-picker-content {
    transform: inherit !important;
    right: 0;
    left: inherit;
    top: 0
}

.login-customer-info .save-button {
    padding: 8px 20px
}

.zb-btone-ap-service-img {
    background-size: cover
}

.template-one-container .checkbox-error {
    padding-top: 5px
}

.template-one-container .zcb-date-picker-content {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    margin-left: -44px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: transform .3s;
    -moz-transition: transform .3s;
    transition: transform .3s
}

.template-one-container .zcb-date-picker-content.open {
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible
}

.template-one-container .zb-btone-date .date-picker-focus:focus .txt-input,
.template-one-container .zb-btone-timezone .zcp-dropdown .select-drop-box:focus {
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important
}

.template-one-container .booknow-class-availability {
    border: none;
    padding: 0 !important;
    position: relative
}

.template-one-container .booknow-class-availability:after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #EBEBEB;
    bottom: 3px
}

.template-one-container .zb-btone-timezone-dropdown .selected-list-down {
    pointer-events: none
}

.template-one-container .zb-btone-timezone-dropdown .selected-list-down.down-list-open.zcb-drop-down-list-open {
    pointer-events: initial
}

.template-one-container .booking-info-container-details {
    margin-left: 0 !important
}

.template-one-container .template-one-embed .zb-btone-content {
    margin-top: 0 !important
}

.template-one-container .zb-btone-resource .zb-resource,
.template-one-container .zb-btone-service .zb-resource {
    font-size: 21px !important
}

.template-one-container .zb-btone-timezone-dropdown .zcp-dropdown .selected-list-down {
    width: 330px;
    overflow: hidden !important;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    height: 279px !important
}

.template-one-container .zb-btone-bgimage {
    object-fit: cover;
    background-size: cover !important
}

.template-one-container .book-container .header {
    z-index: 1
}

.template-one-container .zb-btone-service .zb-oneonone {
    font-size: 17px !important
}

.template-one-container .zb-btone-service .zb-resource {
    font-size: 23px !important
}

.template-one-container .zb-btone-service .zb-class {
    font-size: 22px !important
}

.template-one-container .zb-btone-timezone .zb-timezone {
    font-size: 26px !important
}

.template-one-container .zb-btone-ap-content.zb-btone-ap-bookinginfo .zcb-date-picker-content {
    top: inherit;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
    margin-left: 0
}

.template-one-container.zb-btone-themeeight .book-container .header,
.template-one-container.zb-btone-themeeleven .book-container .header,
.template-one-container.zb-btone-themethree .book-container .header {
    z-index: 2
}

.template-one-container .book-container .header.header-profile-open {
    z-index: 4
}

.template-one-container.zb-btone-themeeight,
.template-one-container.zb-btone-themethree {
    height: 100vh;
    width: 100%;
    background-color: #FFF
}

.template-one-container.zb-btone-themeeight .zb-btone-booknow-footer,
.template-one-container.zb-btone-themeeleven .zb-btone-booknow-footer,
.template-one-container.zb-btone-themethree .zb-btone-booknow-footer {
    z-index: 0
}

.template-one-container.zb-invoice-summary-one .zb-btone-themesignin-split {
    color: #CCC !important
}

.template-one-container .book-container .book-inner-container {
    padding: 0 7px
}

.template-one-container .zb-btone-content {
    z-index: initial
}

.template-one-container .zb-btone-inner-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  grid-auto-flow: row dense;
  grid-gap: 40px;
}

/* Border radius for all items */
.template-one-container .zb-btone-inner-content > * {
  border-radius: 16px;
  overflow: hidden;
  height: 80%;
}

/* 4th item: full row but limited width */
.template-one-container .zb-btone-inner-content > :nth-child(4) {
  grid-column: 1 / -1;           /* Span entire row */
  justify-self: center;          /* Center horizontally */
  width: 31%;            /* Match the width of other items */
  height: 60px;
  max-width: 400px;              /* Optional: cap width for consistency */
}

/* ✅ Mobile fix: Stack items in 1 column */
@media screen and (max-width: 768px) {
  .template-one-container .zb-btone-inner-content {
    grid-template-columns: 1fr;
  }

  .template-one-container .zb-btone-inner-content > :nth-child(4) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;                 /* Back to full width on mobile */
    max-width: none;
    margin-bottom: 70px;
  }
}



.zb-btone-open-servicepopup .zb-btone-service .staff-select-box,
.zb-btone-open-staffpopup .zb-btone-staff .staff-select-box,
.zb-btone-open-timepopup .zb-btone-time .staff-select-box,
.zb-btone-time .staff-select-box {
    z-index: 11
}

.book-container .header,
.zb-btone-open-servicepopup .zb-btone-service .template-two-overlay,
.zb-btone-open-staffpopup .zb-btone-staff .template-two-overlay,
.zb-btone-open-timepopup .zb-btone-time .template-two-overlay {
    z-index: 2
}

.zb-btone-open-servicepopup .zb-btone-bookbutton,
.zb-btone-open-servicepopup .zb-btone-date,
.zb-btone-open-servicepopup .zb-btone-staff,
.zb-btone-open-servicepopup .zb-btone-time,
.zb-btone-open-servicepopup .zb-btone-timezone,
.zb-btone-open-staffpopup .zb-btone-bookbutton,
.zb-btone-open-staffpopup .zb-btone-date,
.zb-btone-open-staffpopup .zb-btone-time,
.zb-btone-open-staffpopup .zb-btone-timezone,
.zb-btone-open-timepopup .zb-btone-bookbutton,
.zb-btone-open-timepopup .zb-btone-date,
.zb-btone-open-timepopup .zb-btone-timezone {
    z-index: 0
}

.zb-btone-container.zb-btone-themefour .zb-btone-themesignin-split,
.zb-btone-container.zb-btone-themetwo .zb-btone-themesignin-split {
    color: #FFF !important
}

.zb-btone-themetwo .signin-iframe-parent #loading svg {
    fill: #FF3C99
}

.zb-btone-themefour .signin-iframe-parent #loading svg {
    fill: #E74E45
}

.zcb-bookings-page-embed .template-one-container .zb-btone-inner-container {
    margin: 0 auto auto;
    height: calc(100% - 0px)
}

.zcb-bookings-page-embed .template-one-container.zb-btone-themeeight .zb-btone-content,
.zcb-bookings-page-embed .template-one-container.zb-btone-themeeleven .zb-btone-content,
.zcb-bookings-page-embed .template-one-container.zb-btone-themethree .zb-btone-content {
    height: 100vh
}

.template-one-container .zb-btone-time .time-slot-popup .bookings-slot-container li {
    padding: 8px 10px
}

.zb-btone-timezone .zb-timezone-freeze .zb-timezone-freeze-dropdown {
    transform: translate(-50%, -40%);
    transition: transform .3s;
    width: 330px;
    height: 125px;
    left: calc(50% - 45px);
    top: 50%;
    z-index: 99;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3);
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

.zb-btone-timezone .zb-timezone-freeze .zb-timezone-freeze-dropdown.open {
    transform: translate(-50%, -50%)
}

.booking-info-container-details {
    padding-left: 0
}

@media only screen and (min-width:768px) and (max-width:1250px) {
    .zb-invoice-summary-one .book-inner-container .summary-list {
        padding: 50px 35px
    }

    .template-one-container.zb-btone-themeone .book-container .header,
    .template-one-container.zb-btone-themetwo .book-container .header {
        background-color: transparent !important
    }

    .template-one-container.zb-btone-container .book-bottom-button {
        bottom: 80px
    }

    .template-one-container .zb-btone-date .zcb-date-picker-content,
    .template-one-container .zb-btone-service .staff-select-box,
    .template-one-container .zb-btone-staff .staff-select-box {
        transform: translate(-50%, 10%);
        top: 0
    }

    .template-one-container .zb-btone-date .zcb-date-picker-content.open,
    .template-one-container .zb-btone-service .staff-select-box.open,
    .template-one-container .zb-btone-staff .staff-select-box.open,
    .template-one-container .zb-btone-staff-hidden.zb-btone-timezone-hidden .zb-btone-time .staff-select-box {
        transform: translate(-50%, 0)
    }

    .template-one-container .zb-btone-staff-hidden .zb-btone-timezone .zcp-dropdown .selected-list-down {
        animation: timeZoneAnimation1 .3s forwards
    }

    .template-one-container .zb-btone-staff-hidden.zb-btone-timezone-hidden .zb-btone-time .staff-select-box.open {
        top: 0
    }

    @keyframes timeZoneAnimation1 {
        from {
            transform: translate(-50%, 10%)
        }

        to {
            transform: translate(-50%, 0)
        }
    }
}

@media only screen and (min-width:1100px) and (max-width:1250px) {
    .template-one-container .zb-btone-staff-hidden .zb-btone-timezone .zcp-dropdown .selected-list-down {
        top: 0
    }

    .template-one-container.zb-invoice-summary-one .book-container .book-inner-container {
        margin: 92px auto 0 !important
    }
}

@media only screen and (min-width:768px) and (max-width:1024px) {

    .template-one-container.zb-btone-themeone .book-container .header,
    .template-one-container.zb-btone-themetwo .book-container .header {
        background-color: transparent !important
    }
}

@media only screen and (min-width:768px) and (max-width:1100px) {
    .template-one-container .zb-btone-inner-content {
        grid-template-columns: repeat(auto-fill, minmax(31%, 1fr)) !important
    }

    .template-one-container .zb-btone-date .zcb-date-picker-content,
    .template-one-container .zb-btone-staff-hidden .zb-btone-time .staff-select-box {
        transform: translate(-50%, -40%)
    }

    .template-one-container .zb-btone-date .zcb-date-picker-content.open,
    .template-one-container .zb-btone-staff-hidden .zb-btone-time .staff-select-box.open {
        transform: translate(-50%, -50%)
    }

    .template-one-container .zb-btone-staff-hidden .zb-btone-date .zcb-date-picker-content {
        transform: translate(-50%, 10%);
        top: 0
    }

    .template-one-container .zb-btone-staff-hidden .zb-btone-date .zcb-date-picker-content.open {
        transform: translate(-50%, 0)
    }

    .template-one-container .zb-btone-time .staff-select-box {
        transform: translate(-50%, -75%)
    }

    .template-one-container .zb-btone-time .staff-select-box.open {
        transform: translate(-50%, -85%)
    }

    .template-one-container .zb-btone-staff-hidden .zb-btone-timezone .zcp-dropdown .selected-list-down {
        animation: timeZoneAnimation .3s forwards
    }
}

@media only screen and (max-width:1200px) {
    .zb-btone-ap-popup-summary {
        width: 60%
    }

    .template-one-container .zb-btone-time .zb-btone-resource-service .zcp-dropdown .selected-list-down.zcb-drop-down-search {
        bottom: 80px
    }

    .template-one-container .zb-btone-time .zb-btone-resource-service .zcp-dropdown .selected-list-down {
        top: inherit !important
    }

    .template-one-container .zb-btone-time .zb-btone-resource-service .zcp-dropdown .selected-list-down .dropdown-search {
        position: absolute;
        bottom: -42px;
        border-top: 1px solid #e1e1e1
    }

    .template-one-container .zb-btone-time .zb-btone-resource-service .zcp-dropdown .selected-list-down,
    .template-one-container .zb-btone-time .zb-btone-resource-service .zcp-dropdown .selected-list-down .zcb-element {
        bottom: -2px;
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        padding-top: inherit
    }

    .template-one-container .zb-btone-time .zb-btone-resource-service .zcp-dropdown {
        margin-bottom: 0;
        -webkit-box-shadow: 0 -3px 8px #a5a5a540;
        -moz-box-shadow: 0 -3px 8px #a5a5a540;
        box-shadow: 0 -3px 8px #a5a5a540
    }
}

@media only screen and (max-width:1250px) {
    .zb-btone-inner-container {
        padding: 10px 30px 0
    }

    .zb-btone-inner-content {
        margin-top: 60px
    }

    .zb-btone-container .zb-btone-ap-popup-summary {
        width: 100%
    }

    .template-one-container.zb-btone-themeeight .zb-btone-content .zb-btone-inner-container,
    .template-one-container.zb-btone-themeeleven .zb-btone-content .zb-btone-inner-container,
    .template-one-container.zb-btone-themethree .zb-btone-content .zb-btone-inner-container {
        padding-top: 17px
    }

    .template-one-container .cancel-alert.cancel-popup {
        width: 60% !important
    }

    .template-one-container .book-container .book-inner-container {
        width: 100%;
        max-width: inherit;
        padding: 0 10px
    }

    .template-one-container .book-inner-container {
        margin-top: 50px
    }

    .template-one-container.zb-invoice-summary-one .book-inner-container {
        padding: 0 10px;
        height: calc(100vh - 110px)
    }
}

@media only screen and (max-width:1250px) and (min-width:768px) {
    .zcb-bookings-page-embed .template-one-container.zb-btone-container .zb-btone-ap-popup-summary {
        width: 60%
    }
}

@media only screen and (max-width:767px) {
    .zb-btone-inner-content {
        margin-top: 40px
    }

    .zb-btone-ap-date-timezone {
        flex-direction: column
    }

    .zb-btone-ap-date-timezone>span:first-child {
        margin-bottom: 10px
    }

    .zb-btone-container .zb-btone-ap-container {
        padding: 20px 15px 100px !important
    }

    .zb-btone-ap-popup-summary .zb-btone-ap-header {
        padding: 15px 13px 15px 5px !important
    }

    .zb-btone-container.zb-btone-themethree .book-container .header.header {
        background-color: #FFF !important
    }

    .zb-btone-themeeleven.zb-btone-container .book-container .header {
        background-color: transparent !important
    }

    .zb-btone-container.template-one-container .book-bottom-button {
        bottom: 90px !important
    }

    .zb-btone-ap-bookinginfo .booking-info-container {
        width: 100% !important
    }

    .booking-info-container .bookings-field-theme .label-container>div {
        margin-bottom: 0
    }

    .template-one-container .booking-info-container-details .login-customer-info .label-container.label-no-line:after {
        min-height: initial
    }

    .template-one-container .steps>ul>li .book-label,
    .template-one-container .steps>ul>li .value {
        float: none;
        width: 100% !important
    }

    .template-one-container .steps>ul>li .value {
        margin-top: 10px
    }

    .template-one-container .booking-invoice-status {
        top: -26px
    }

    .template-one-container .steps>ul>li .value.alert {
        padding-left: 30px
    }

    .template-one-container .footer {
        margin: 20px 0;
        padding: 0 !important
    }

    .template-one-container .book-container .book-inner-container .header-title p {
        display: none !important
    }

    .template-one-container .book-container .header,
    .template-one-container.zb-invoice-summary-one .book-container .header {
        height: 112px !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        color: #181818
    }

    .template-one-container .book-container .header .booknow-header {
        margin-top: 0 !important;
        width: 100%;
        text-align: center
    }

    .template-one-container .book-container .book-inner-container {
        margin: 17px 0 0;
        height: calc(100vh - 20px);
        overflow: auto
    }

    .template-one-container .overlay,
    .template-one-container .popup-summary {
        height: 100vh
    }

    .template-one-container .book-container .book-inner-container .header-title {
        border-bottom: none;
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 2;
        top: 46px
    }

    .template-one-container .book-container .book-inner-container .header-title h1 {
        font-size: 19px;
        background-color: #f84f7b;
        line-height: normal;
        color: #FFF;
        padding: 10px 0;
        font-family: 'BrownMedium';
    }

    .template-one-container .book-container .booknow-button {
        width: 100%;
        padding: 11px 0;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        font-size: 17px !important
    }

    .template-one-container .book-container .template-booknow-buttom {
        margin-top: 10px !important;
        margin-bottom: 0 !important
    }

    .template-one-container .zcb-date-picker-content {
        transform: translate(-50%, -40%);
        left: 50%
    }

    .template-one-container .zb-btone-service .staff-select-box {
        transform: translate(-50%, 10%);
        top: 0
    }

    .template-one-container .zb-btone-service .staff-select-box.open {
        max-height: 320px !important;
        transform: translate(-50%, 0)
    }

    .template-one-container .staff-select-box.open .booking-slot-group {
        max-height: inherit
    }

    .template-one-container .book-bottom-button {
        bottom: 30px
    }

    .template-one-container .summary-service-label {
        flex-direction: inherit !important
    }

    .template-one-container .header-container {
        padding-left: 15px !important;
        padding-right: 15px !important
    }

    .template-one-container .appointment-content {
        padding: 15px !important
    }

    .template-one-container .template-two-booking-info .booking-info-container.booking-info-container {
        margin-top: 0 !important
    }

    .template-one-container .template-two-booking-info .login-customer-info {
        margin-left: 20px !important
    }

    .template-one-container .zb-btone-content .zb-btone-inner-container,
    .template-one-container.zb-btone-themeeight .zb-btone-content.zb-btone-content,
    .template-one-container.zb-btone-themeeleven .zb-btone-content.zb-btone-content,
    .template-one-container.zb-btone-themethree .zb-btone-content.zb-btone-content {
        margin: 112px auto auto;
        height: calc(100vh - 112px)
    }

    .template-one-container .template-one-embed .zb-btone-inner-container,
    .template-one-container.zb-btone-themeeight .zb-btone-content .zb-btone-inner-container.zb-btone-inner-container,
    .template-one-container.zb-btone-themeeleven .zb-btone-content .zb-btone-inner-container.zb-btone-inner-container,
    .template-one-container.zb-btone-themethree .zb-btone-content .zb-btone-inner-container.zb-btone-inner-container {
        margin-top: 0;
        padding-top: 15px
    }

    .template-one-container .zb-btone-date .zcb-date-picker-content,
    .template-one-container .zb-btone-service .staff-select-box,
    .template-one-container .zb-btone-staff .staff-select-box,
    .template-one-container .zb-btone-time .staff-select-box,
    .template-one-container .zb-btone-timezone-dropdown .zcp-dropdown .selected-list-down {
        width: 100%;
        max-width: 313px
    }

    .template-one-container .zb-btone-date .zcb-date-picker-content {
        width: auto
    }

    .template-one-container .template-one-embed .zb-btone-inner-container .zb-btone-inner-content {
        padding-bottom: 40px
    }

    .template-one-container .book-container .book-inner-container {
        padding: 0 7px
    }

    .template-one-container .zb-btone-timezone-dropdown .zcp-dropdown .selected-list-down {
        width: calc(100% + 50px)
    }

    .template-one-container .header .header-container>div:first-child>div {
        flex-direction: column
    }

    .template-one-container .book-container .header .bookingpage-logo {
        max-height: 50px;
        margin-bottom: 10px;
        margin-right: 0 !important
    }

    .template-one-container.zb-invoice-summary-one .book-inner-container {
        margin-top: 119px !important
    }

    .template-one-container.zb-invoice-summary-one .book-container .book-inner-container {
        max-height: calc(100vh - 117px)
    }

    .template-one-container .zb-btone-inner-content {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        grid-auto-flow: row dense;
        grid-gap: 15px
    }

    .template-one-container.zb-invoice-summary-one .book-container .book-inner-container.book-inner-container {
        max-height: calc(100vh - 165px)
    }

    .zcb-bookings-page-embed .template-one-container {
        height: 100vh
    }

    .zcb-bookings-page-embed .template-one-container .zb-btone-content {
        padding-bottom: 30px
    }

    .zb-invoice-summary-one .book-container .book-inner-container .summary-list {
        padding: 50px 26px
    }

    .customer-appointment-button-content {
        position: absolute
    }
}

@media only screen and (max-width:330px) {

    .template-one-container .zb-btone-service .staff-select-box,
    .template-one-container .zb-btone-staff .staff-select-box,
    .template-one-container .zb-btone-time .staff-select-box {
        min-width: auto
    }

    .template-one-container .zcb-date-picker-content {
        width: 100%
    }

    .template-one-container .bookings-field-theme .label-container .zcb-date-picker .zcb-date-picker-content div {
        font-size: 10px
    }

    .template-one-container .bookings-field-theme .label-container .zcb-datepicker-table-row>.zcb-date,
    .template-one-container .zcb-datepicker-table-row>.zcb-date {
        padding: 3px
    }

    .template-one-container .zb-btone-inner-container {
        padding: 10px 15px 0
    }

    .template-one-container .bookings-field-theme .label-container .zcb-date-picker .zcb-date-picker-month-name {
        width: 93px
    }
}

@media only screen and (max-width:281px) {
    .template-one-container .bookings-field-theme .label-container .zcb-datepicker-table-row>.zcb-date {
        padding: 2px
    }

    .template-one-container .bookings-field-theme .label-container .zcb-date-picker .zcb-date-picker-content div {
        font-size: 8px
    }

    .summary-list .zb-summary-meeting-link {
        width: 100%;
        margin-left: 45px
    }
}