body {
    font-feature-settings: "tnum", "tnum";
    background-color: #fff;
    color: #000000d9;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    margin: 0
}

#msform {
    margin-top: 20px;
    position: relative;
    text-align: center
}

#progressbar {
    color: #d3d3d3;
    margin-bottom: 30px;
    overflow: hidden;
    padding: 0
}

#progressbar .active {
    color: #00a2ff
}

#progressbar li {
    float: left;
    font-size: 15px;
    font-weight: 400;
    list-style-type: none;
    position: relative;
    width: 33.33333%
}

#progressbar #account:before {
    content: "\f007";
    font-family: FontAwesome
}

#progressbar #personal:before {
    content: "\f073";
    font-family: FontAwesome
}

#progressbar #payment:before {
    content: "\f030";
    font-family: FontAwesome
}

#progressbar #confirm:before {
    content: "\f00c";
    font-family: FontAwesome
}

#progressbar li:before {
    background: #d3d3d3;
    border-radius: 50%;
    color: #fff;
    display: block;
    font-size: 20px;
    height: 50px;
    line-height: 45px;
    margin: 0 auto 10px;
    padding: 2px;
    width: 50px
}

#progressbar li:after {
    background: #d3d3d3;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: 25px;
    width: 100%;
    z-index: -1
}

#progressbar li.active:after,
#progressbar li.active:before {
    background: #00a2ff
}

.progress {
    height: 20px
}

.progress-bar {
    background-color: #00a2ff
}

.calendar__wrapper {
    display: flex;
    height: 700px;
    justify-content: center;
    margin: 0 auto 100px;
    padding: 40px 100px 0
}

.date__time {
    border: 1px solid #4d50551a;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0 1px 8px 0 #00000014;
    padding: 28px 2px 0 19px;
    position: relative
}

.date__time h2 {
    color: #1a1a1a;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px
}

.user__wrapper {
    border: 1px solid #4d50551a;
    border-bottom-left-radius: 8px;
    border-right: none;
    border-top-left-radius: 8px;
    box-shadow: 0 1px 8px 0 #00000014;
    padding: 25px 0 100px;
    position: relative;
    width: 30%
}

.user__wrapper p {
    color: #1a1a1a9c;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin: 0
}

.user__wrapper h2 {
    color: #1a1a1a;
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
    margin: 0 0 24px
}

.user__wrapper .minute {
    align-items: center;
    display: flex;
    gap: 8px
}

.user__wrapper span {
    color: #1a1a1a9c;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px
}

.user__wrapper svg {
    color: #1a1a1a9c
}

.calendar__container {
    display: flex;
    gap: 24px
}

.button__time-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 212px
}

.button__time-wrapper button {
    align-items: center;
    background-color: initial;
    border: 1px solid #00a2ff80;
    border-radius: 4px;
    color: #0069ff;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
    min-height: 52px;
    padding: 13px 10px;
    transition: all .3s ease;
    transition-property: width, transform;
    vertical-align: top;
    width: 100%
}

.next__button .green__text {
    display: none
}

.button__time-wrapper .green__text {
    position: relative;
    right: 12px
}

.button__time-wrapper .time:hover {
    border: 2px solid #00a2ff80
}

.button__time-wrapper {
    height: 480px;
    overflow-y: scroll;
    padding-right: 10px
}

.next__button {
    display: flex;
    gap: 10px;
    transition: all 1s ease-out
}

.next__button button,
.next__button>div {
    width: 50%
}

.next__button>div button {
    width: 100%
}

.next__button button:first-child {
    background-color: #0009;
    border: none;
    color: #fff
}

.next__button button:first-child:hover {
    border: none
}

.next__button button:last-child {
    background-color: #00a2ff;
    color: #fff
}

.react-calendar {
    border: none !important;
    padding-bottom: 10px;
    padding-right: 17px;
    width: 390px !important
}

.react-calendar__month-view__weekdays__weekday {
    color: #4d5055;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase
}

.react-calendar__month-view__weekdays__weekday abbr {
    text-decoration: none
}

button.react-calendar__tile.react-calendar__tile--active.react-calendar__tile--range.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd.react-calendar__tile--rangeBothEnds.react-calendar__month-view__days__day abbr {
    align-items: center;
    background-color: red;
    background-color: #0069ff;
    border-radius: 50%;
    display: inline-block;
    display: flex;
    height: 44px;
    justify-content: center;
    position: relative;
    top: -10px;
    width: 44px
}

.react-calendar__tile {
    color: #959699 !important;
    font-size: 16px !important;
    height: 44px !important;
    width: 52px !important
}

.react-calendar__tile--active {
    background: #0000 !important;
    border-radius: 50%;
    color: #fff !important
}

.calendar__time {
    padding-right: 40px;
    padding-top: 4px
}

.calendar__time h2 {
    font-size: 16px;
    font-weight: 400;
    line-height: 38px;
    margin: 0;
    padding-bottom: 10px
}

.react-calendar__navigation__label {
    flex-grow: 0 !important;
    font-size: 16px
}

.box__shadow svg {
    color: #00a2ff;
    height: 22px;
    width: 22px
}

.arrow {
    align-items: center;
    background-color: #f5faff;
    border-radius: 50%;
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px
}

button.react-calendar__navigation__arrow.react-calendar__navigation__next2-button,
button.react-calendar__navigation__arrow.react-calendar__navigation__prev2-button {
    display: none
}

.react-calendar__navigation {
    gap: 20px;
    justify-content: center
}

button.react-calendar__tile.react-calendar__tile--now.react-calendar__month-view__days__day.react-calendar__month-view__days__day--weekend {
    background: none
}

.react-calendar__navigation button:enabled:focus,
.react-calendar__navigation button:enabled:hover {
    background-color: initial !important
}

.form__wrapper.date__time {
    width: 50%
}

.form__wrapper form>div {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px
}

.form__wrapper input {
    border: 1px solid #b2b2b2;
    border-radius: 8px;
    height: 46px;
    padding-left: 14px;
    width: 62%
}

.form__wrapper label {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px
}

.form__wrapper .submit {
    background-color: #0069ff;
    border: none;
    border-radius: 40px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    height: 44px;
    margin-top: 10px;
    padding: 0;
    width: 146px
}

.add__guests {
    background-color: initial;
    border: 1px solid #0069ff;
    border-radius: 40px;
    box-shadow: none;
    color: #0066e5;
    font-size: 14px;
    font-weight: 400;
    height: 32px;
    width: 98px
}

button {
    cursor: pointer
}

.form__wrapper form p {
    color: red;
    font-size: 12px;
    margin: 0
}

.space__bettwen {
    margin-top: 14px
}

.react-calendar__tile--now {
    background-color: initial !important
}

.back__svg {
    cursor: pointer;
    left: -3px;
    left: 30px;
    position: absolute;
    top: 30px
}

.back__svg svg {
    height: 46px;
    width: 46px
}

.logo__wrapper {
    align-items: center;
    border-bottom: 1px solid #4d50551a;
    display: flex;
    height: 148px;
    justify-content: center;
    text-align: center
}

.minute {
    padding: 0 30px
}

.content__wrapper {
    padding: 25px 30px 0
}

.mt-12 {
    margin-top: 14px
}

.center__text {
    height: 82%
}

.footer__wrapper {
    display: flex;
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 30px
}

.footer__wrapper p:first-child {
    color: #0069ff;
    font-size: 14px;
    font-weight: 400
}

.footer__wrapper p:last-child {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 400
}

.time__zone-wrapper {
    padding-left: 12px
}

.available__wrapper {
    align-items: center;
    background-color: #fafafa;
    border-radius: 4px;
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 20px;
    padding: 8px 0;
    width: 212px
}

.available__wrapper p {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 400;
    margin: 0
}

.green__text {
    background-color: #40d794;
    border-radius: 50%;
    height: 8px;
    width: 8px
}

.time__zone-wrapper p {
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px
}

.central {
    align-items: center;
    color: #1a1a1a;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    gap: 6px;
    padding-left: 8px
}

.screen__three {
    border-radius: 8px;
    padding: 30px 0;
    position: relative;
    text-align: center;
    width: 79%
}

input {
    font-size: 16px
}

.thank__you-page .content__wrapper-page h2 {
    align-items: center;
    color: #1a1a1a;
    display: flex;
    font-size: 28px;
    font-weight: 700;
    gap: 10px;
    justify-content: center;
    line-height: 34px;
    margin: 24px 0 10px
}

.thank__you-page .content__wrapper-page h2 svg {
    color: #028164
}

.thank__you-page .content__wrapper-page p {
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0
}

.meeting__information {
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
    width: 408px
}

.thank__you-page .content__wrapper-page .meeting__information h2 {
    color: #1a1a1a;
    font-size: 20px;
    justify-content: flex-start;
    line-height: 24px;
    margin: 0 0 12px
}

.meeting__information svg {
    color: #1a1a1a9c;
    height: 20px;
    width: 20px
}

.meeting__information span {
    color: #1a1a1a9c;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px
}

.meeting__information .minute {
    display: flex;
    gap: 8px;
    padding: 0
}

.cookie__setting {
    bottom: 20px;
    color: #0069ff;
    font-size: 14px;
    font-weight: 400;
    left: 30px;
    position: absolute
}

@media (min-width: 768px) {

    .footer__wrapper-mobile,
    .hide__desktop,
    .logo__wrapper-calendly-mobile {
        display: none
    }
}

@media (max-width: 768px) {
    .form__wrapper.date__time>div:first-child {
        padding: 0 10px
    }

    .form__wrapper.date__time button {
        width: 100%
    }

    .hide__mobile {
        display: none
    }

    button.react-calendar__tile.react-calendar__tile--active.react-calendar__tile--range.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd.react-calendar__tile--rangeBothEnds.react-calendar__month-view__days__day abbr {
        left: -5px
    }

    .calendar__wrapper {
        flex-direction: column;
        height: auto;
        margin-bottom: 30px;
        padding: 0
    }

    .user__wrapper {
        box-shadow: none;
        padding: 0 0 60px;
        text-align: center;
        width: 100%
    }

    .user__wrapper p {
        padding-top: 20px
    }

    .user__wrapper .minute {
        padding-left: 30px
    }

    .react-calendar {
        padding: 0;
        width: 100% !important
    }

    .date__time {
        border: none;
        box-shadow: none;
        padding: 0 20px;
        text-align: center
    }

    .mobile__version .calendar__date {
        display: none
    }

    .calendar__time {
        padding-right: 0;
        width: 100%
    }

    .button__time-wrapper {
        height: auto;
        margin-bottom: 0;
        padding: 0;
        width: 100%
    }

    .button__time-wrapper button,
    .form__wrapper.date__time {
        width: 100%
    }

    .form__wrapper input {
        width: 94%
    }

    .form__wrapper.date__time {
        padding: 0
    }

    .space__top {
        padding-top: 20px
    }

    .date__time form {
        padding: 0 20px
    }

    .form__wrapper label {
        text-align: left
    }

    .add__guests,
    .form__wrapper .submit {
        width: 100%
    }

    .form__wrapper.date__time h2 {
        padding-left: 20px;
        text-align: left
    }

    .full__width {
        width: 100%
    }

    .next__button button {
        width: 50%
    }

    .mobile__back-svg {
        align-items: center;
        display: flex;
        justify-content: center;
        padding-left: 0
    }

    .mobile__back-svg .back__svg {
        margin: 0;
        padding-right: 20px
    }

    .form__wrapper form>div {
        gap: 8px
    }

    .add__guests {
        position: relative;
        top: -8px
    }

    .svg__icon .full__width {
        display: none
    }

    .form__wrapper form p {
        text-align: left
    }

    .logo__wrapper {
        height: 120px
    }

    .logo__wrapper img {
        width: 120px
    }

    .time__zone-wrapper p {
        text-align: left
    }

    .time__zone-wrapper {
        padding-left: 4px
    }

    .footer__wrapper {
        display: none
    }

    .back__svg {
        left: 8px;
        top: 8px
    }

    .available__wrapper {
        width: 100%
    }

    .calendar__wrapper .date__time h2 {
        margin-bottom: 8px;
        margin-top: 8px;
        padding: 0;
        text-align: center
    }

    .footer__wrapper.footer__wrapper-mobile {
        display: flex;
        margin-top: 20px;
        padding-left: 2px;
        padding-right: 2px
    }

    .footer__wrapper.footer__wrapper-mobile.footer__wrapper-contact {
        padding: 0 20px
    }

    .screen__two .minute {
        padding-left: 16px
    }

    .meeting__information,
    .screen__three {
        padding: 0;
        width: 100%
    }

    .meeting__information .minute:first-child {
        padding-top: 20px
    }

    .meeting__information .minute:last-child {
        padding-bottom: 20px
    }

    .meeting__information .minute {
        padding-left: 20px;
        padding-right: 20px
    }

    .thank__you-page .content__wrapper-page .meeting__information h2 {
        padding: 20px 20px 0
    }

    .thank__you-page {
        padding: 30px 15px
    }

    .cookie__setting {
        margin-top: 50px;
        position: static
    }
}

.loader {
    animation: rotation 1s linear infinite;
    border: 2px solid;
    border-color: #fff #fff #0000;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-block;
    height: 28px;
    width: 28px
}

@keyframes rotation {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.logo__wrapper-calendly {
    height: 105px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: -5px;
    text-decoration: none;
    top: -5px;
    transition: all .1s ease-in;
    width: 105px;
    will-change: transform;
    z-index: 1
}

.logo__wrapper-calendly .background {
    background-color: #505960;
    box-shadow: 0 2px 4px 0 #0003;
    color: #fff;
    display: block;
    font-weight: 700;
    left: -11px;
    line-height: 1.2;
    padding: 9px 0 6px;
    pointer-events: auto;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 21px;
    transform: rotate(45deg);
    transition: all .1s ease-in;
    width: 160px;
    z-index: 1
}

.logo__wrapper-calendly:before {
    left: 0;
    top: 0
}

.logo__wrapper-calendly:after,
.logo__wrapper-calendly:before {
    background-color: #505960;
    content: "";
    height: 6px;
    position: absolute;
    transition: all .1s ease-in;
    width: 6px
}

.logo__wrapper-calendly:after {
    bottom: 0;
    right: 0
}

.logo__wrapper-calendly .powerd__by {
    font-size: 8px
}

.logo__wrapper-calendly .calendly {
    font-size: 14px
}

.logo__wrapper-calendly-mobile {
    height: 105px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-decoration: none;
    top: 0;
    transition: all .1s ease-in;
    width: 105px;
    will-change: transform
}

.logo__wrapper-calendly-mobile .background {
    background-color: #505960;
    box-shadow: 0 2px 4px 0 #0003;
    color: #fff;
    display: block;
    font-weight: 700;
    left: -5px;
    line-height: 1.2;
    padding: 9px 0 6px;
    pointer-events: auto;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 15px;
    transform: rotate(45deg);
    transition: all .1s ease-in;
    width: 160px
}

.logo__wrapper-calendly-mobile .powerd__by {
    font-size: 7px;
    margin-left: -7px
}

.logo__wrapper-calendly-mobile .calendly {
    font-size: 14px;
    margin-left: -7px
}

.facebook__button button {
    background: #1877f2;
    border: none;
    color: #fff;
    font-style: normal;
    font-weight: 700
}

.facebook__button button,
.gmail__button button {
    align-items: center;
    border-radius: 10px;
    display: flex;
    font-family: Helvetica;
    font-size: 16px;
    gap: 7px;
    justify-content: center;
    padding: 15px;
    width: 300px
}

.gmail__button button {
    background: #fff;
    border: none;
    box-shadow: 0 2px 3px 0 #0000002b, 0 0 3px 0 #00000014;
    margin-top: 12px
}

.dummy__text {
    background-color: #fff8e8;
    border: 1px solid #4d50551a;
    border-radius: 10px;
    margin-bottom: 20px;
    margin-right: 12px;
    padding: 10px 12px 0
}

.avatar {
    border-radius: 50%
}

.danger__wrapper {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 40px;
    padding-left: 40px
}

.react-calendar__navigation button:disabled {
    background-color: initial !important
}

.react-calendar__navigation button:disabled .arrow {
    opacity: .5
}

.site-layout-content {
    background: #fff;
    min-height: 280px;
    padding: 24px
}

#components-layout-demo-top .logo {
    background: #ffffff4d;
    float: left;
    height: 31px;
    margin: 16px 24px 16px 0;
    width: 120px
}

.ant-row-rtl #components-layout-demo-top .logo {
    float: right;
    margin: 16px 0 16px 24px
}

.dashboard__wrapper ul.ant-menu-overflow.ant-menu.ant-menu-root.ant-menu-horizontal.ant-menu-dark {
    justify-content: flex-end
}

.dashboard__wrapper .ant-layout-header {
    padding: 0 !important
}

.react-calendar {
    background: #fff;
    border: 1px solid #a0a096;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.125em;
    max-width: 100%;
    width: 350px
}

.react-calendar--doubleView {
    width: 700px
}

.react-calendar--doubleView .react-calendar__viewContainer {
    display: flex;
    margin: -.5em
}

.react-calendar--doubleView .react-calendar__viewContainer>* {
    margin: .5em;
    width: 50%
}

.react-calendar,
.react-calendar *,
.react-calendar :after,
.react-calendar :before {
    box-sizing: border-box
}

.react-calendar button {
    border: 0;
    margin: 0;
    outline: none
}

.react-calendar button:enabled:hover {
    cursor: pointer
}

.react-calendar__navigation {
    display: flex;
    height: 44px;
    margin-bottom: 1em
}

.react-calendar__navigation button {
    background: none;
    min-width: 44px
}

.react-calendar__navigation button:disabled {
    background-color: #f0f0f0
}

.react-calendar__navigation button:enabled:focus,
.react-calendar__navigation button:enabled:hover {
    background-color: #e6e6e6
}

.react-calendar__month-view__weekdays {
    font: inherit;
    font-size: .75em;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase
}

.react-calendar__month-view__weekdays__weekday {
    padding: .5em
}

.react-calendar__month-view__weekNumbers .react-calendar__tile {
    align-items: center;
    display: flex;
    font: inherit;
    font-size: .75em;
    font-weight: 700;
    justify-content: center
}

.react-calendar__month-view__days__day--weekend {
    color: #d10000
}

.react-calendar__century-view__decades__decade--neighboringCentury,
.react-calendar__decade-view__years__year--neighboringDecade,
.react-calendar__month-view__days__day--neighboringMonth {
    color: #757575
}

.react-calendar__century-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__year-view .react-calendar__tile {
    padding: 2em .5em
}

.react-calendar__tile {
    background: none;
    line-height: 16px;
    font: inherit;
    font-size: .833em;
    max-width: 100%;
    padding: 10px 6.6667px;
    text-align: center
}

.react-calendar__tile:disabled {
    background-color: #f0f0f0;
    color: #ababab
}

.react-calendar__century-view__decades__decade--neighboringCentury:disabled,
.react-calendar__decade-view__years__year--neighboringDecade:disabled,
.react-calendar__month-view__days__day--neighboringMonth:disabled {
    color: #cdcdcd
}

.react-calendar__tile:enabled:focus,
.react-calendar__tile:enabled:hover {
    background-color: #e6e6e6
}

.react-calendar__tile--now {
    background: #ffff76
}

.react-calendar__tile--now:enabled:focus,
.react-calendar__tile--now:enabled:hover {
    background: #ffffa9
}

.react-calendar__tile--hasActive {
    background: #76baff
}

.react-calendar__tile--hasActive:enabled:focus,
.react-calendar__tile--hasActive:enabled:hover {
    background: #a9d4ff
}

.react-calendar__tile--active {
    background: #006edc;
    color: #fff
}

.react-calendar__tile--active:enabled:focus,
.react-calendar__tile--active:enabled:hover {
    background: #1087ff
}

.react-calendar--selectRange .react-calendar__tile--hover {
    background-color: #e6e6e6
}