@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@font-face {
    font-family: __Montserrat_b1da2a;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/_next/static/media/aec774cbe1963439-s.woff2) format("woff2");
    unicode-range: U+0460-052f, U+1c80-1c88, U+20b4, U+2de0-2dff, U+a640-a69f, U+fe2e-fe2f
}

@font-face {
    font-family: __Montserrat_b1da2a;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/_next/static/media/634216363f5c73c1-s.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116
}

@font-face {
    font-family: __Montserrat_b1da2a;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/_next/static/media/d83fe381bb17eb77-s.woff2) format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01a0-01a1, U+01af-01b0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1ea0-1ef9, U+20ab
}

@font-face {
    font-family: __Montserrat_b1da2a;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/_next/static/media/88325a2c1fede2f4-s.woff2) format("woff2");
    unicode-range: U+0100-02af, U+0304, U+0308, U+0329, U+1e00-1e9f, U+1ef2-1eff, U+2020, U+20a0-20ab, U+20ad-20c0, U+2113, U+2c60-2c7f, U+a720-a7ff
}

@font-face {
    font-family: __Montserrat_b1da2a;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/_next/static/media/e1c529c04de64b40-s.p.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: __Montserrat_Fallback_b1da2a;
    src: local("Arial");
    ascent-override: 84.95%;
    descent-override: 22.03%;
    line-gap-override: 0.00%;
    size-adjust: 113.95%
}

.__className_b1da2a {
    font-family: __Montserrat_b1da2a, __Montserrat_Fallback_b1da2a;
    font-style: normal
}

body {
    position: relative;
    overflow: hidden
}

@media screen and (orientation: portrait) and (min-device-width: 270px) and (max-device-width: 1024px) {
    html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0
    }
}

:root {
    --bg-scrollbar: #ffcb82;
    --bg-scrollbar-l: #ffcb82;
    --bg-scrollbar-r: #fe835b
}

.round {
    position: relative
}

.round label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 28px;
    left: 0;
    position: absolute;
    top: 0;
    width: 28px
}

.round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 7px;
    opacity: 0;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 12px
}

.round input[type=checkbox] {
    visibility: hidden
}

.round input[type=checkbox]:checked + label {
    background-color: #1850b5;
    border-color: #1850b5
}

.round input[type=checkbox]:checked + label:after {
    opacity: 1
}

/** {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-scrollbar-l) var(--bg-scrollbar-r)
}*/

/*::-webkit-scrollbar {
    width: 15px
}*/

/*::-webkit-scrollbar-track {
    background: repeating-linear-gradient(45deg, var(--bg-scrollbar-l) var(--bg-scrollbar-r));
    border-radius: 5px;
    box-shadow: #242424
}

::-webkit-scrollbar-thumb {
    background-color: repeating-linear-gradient(45deg, var(--bg-scrollbar-l) var(--bg-scrollbar-r));
    border-radius: 14px;
    border: 3px solid var(--bg-scrollbar)
}*/

@property --t {
    syntax: "<number>";
    initial-value: 10;
    inherits: true
}

@property --s {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true
}

.countdown {
    --s: calc(var(--t) / 1);
    display: grid;
    margin: 0 8px;
    animation: t 10s linear infinite
}

.countdown, .countdown:after {
    align-items: center;
    justify-content: center
}

.countdown:after {
    grid-row: 1;
    color: #fff;
    display: flex;
    grid-column: 1;
    place-self: center;
    counter-reset: s var(--s);
    font: normal normal 700 var(--s-24);
    content: counter(s, decimal-leading-zero)
}

@keyframes t {
    to {
        --t: 0
    }
}

svg {
    grid-column: 1;
    grid-row: 1
}

[r] {
    fill: none;
    stroke: silver
}

[r] + [r] {
    --k: calc(var(--t) / 10);
    transform: rotate(-90deg);
    stroke-linecap: round;
    stroke: color-mix(in hsl shorter hue, green calc(var(--k) * 100%), #ed8a4d);
    stroke-dasharray: var(--k) 1
}

:root {
    --bs-blue: #aa8af1;
    --bs-indigo: #6610f2;
    --bs-purple: #6a008a;
    --bs-pink: #e91e63;
    --bs-red: #da2345;
    --bs-orange: #f2a654;
    --bs-yellow: #f6e84e;
    --bs-green: #46c35f;
    --bs-teal: #58d8a3;
    --bs-cyan: #57c7d4;
    --yellow: #111315;
    --light-yellow: #8544f908;
    --bluemango: #212a3e;
    --grey: #292c2d;
    --grey-normal: #a7a7a7;
    --grey-main: #505050;
    --grey-light: #989898;
    --grey-thin: #404142;
    --grey-thin-40percent: hsla(0, 0%, 82%, .4);
    --grey-thin-10percent: #ebebeb;
    --grey-thin-20percent: hsla(0, 0%, 82%, .2);
    --grey-dash: #b1b1b1;
    --back-50percernt: rgba(0, 0, 0, .5);
    --orange: #ffcc05;
    --orange-dark: #f28500;
    --orange-dark-bold: #f28500;
    --orange-overlay: rgba(255, 204, 5, .2);
    --pink: #f44c7f;
    --violet: #8b85ca;
    --violet-20percent: rgba(139, 133, 202, .2);
    --white: #fff;
    --white-95percent: hsla(0, 0%, 100%, .95);
    --black-mac: #242424;
    --grey-mac: #393939;
    --small-font-size: 12px;
    --small-line-height: 18px;
    --default-font-size: 14px;
    --default-line-height: 18px;
    --medium-font-size: 34px;
    --medium-line-height: 18px;
    --large-line-height: 32px;
    --big-font-size: 50px;
    --big-line-height: 40px;
    --extrabig-font-size: 64px;
    --extrabig-line-height: 40px;
    --superbig-font-size: 114px;
    --superbig-line-height: 82px;
    --unnamed-font-weight-normal: 400;
    --unnamed-font-weight-medium: 500;
    --unnamed-font-weight-semibold: 600;
    --unnamed-font-weight-bold: 700;
    --unnamed-font-weight-extra-bold: 800;
    --unnamed-character-spacing-0: 0px;
    --unnamed-text-transform-uppercase: uppercase;
    --root-spacing: 0;
    --default-spacing: 10px;
    --normal-spacing: 20px;
    --middle-spacing: 40px;
    --big-spacing: 60px;
    --superbig-spacing: 100px;
    --main-max-width: 1024px;
    --max-width: 100%;
    --half-width: 50%;
    --big-logo-width: 21.4rem;
    --max-height: 100%;
    --half-height: 50%;
    --big-logo-height: 12.5rem;
    --radio-width: 22px;
    --radio-height: 22px;
    --card-slider-item-width: 19.3em;
    --card-slider-item-height: 420px;
    --check-portrait-icon-width: 110px;
    --check-portrait-icon-height: 70px;
    --block-left-right-default-width: 512px;
    --slider-arrow-width: 28px;
    --slider-arrow-height: 51px;
    --setting-button-width: 52px;
    --login-login-width: 350px;
    --number-keyboard-area: 944px;
    --number-keyboard-width: 3.4em;
    --number-keyboard-delete-width: 1.47vw;
    --information-width: 646px;
    --header-height: 100px;
    --header-logo-height: 70px;
    --footer-height: 178px;
    --footer-submit-width: 888px;
    --customer-num: 47px;
    --tech-element: 202px;
    --tech-norequest-width: 91px;
    --tech-norequest-height: 109px;
    --categories-element: 205px;
    --categories-checked: 94px;
    --categories-text: 44px;
    --popup-width: 944px;
    --popup-height: 340px;
    --popup-close: 78px;
    --signpad-height: 290px;
    --clock-size: 125px;
    --reward-element-width: 692px;
    --reward-element-height: 418px;
    --reward-symbol: 66px;
    --reward-percent-width: 143px;
    --reward-list-area-width: 1646px;
    --reward-list-area-height: 922px;
    --right-bar-width: 169.6vw;
    --right-bar-max-width: 683px;
    --right-bar-content-area-max-width: 260px;
    --scorllbar-width: 4px;
    --remove-category-item-width: 64px;
    --tech-symbol-width: 40px;
    --add-guest-width: 700px;
    --add-guest-height: 1093px;
    --add-guest-num: 133px;
    --add-guest-numberphone-width: 615px;
    --add-guest-numberphone-height: 911px;
    --guest-max-width: 365px;
    --arrow-width: 28px;
    --arrow-height: 51px;
    --categories-slider-item: 105px;
    --categories-slider-text: 150px;
    --service-slider-item: 344px;
    --service-slider-item-height: 20px;
    --appointment-main-box-width: 1200px;
    --appointment-button: 200px;
    --appointment-text-label-width: 60px;
    --appointment-footer-submit-width: 1240px;
    --appointment-footer-submit-min-width: 786px;
    --appointment-footer-button: 264px;
    --hambegur-width: 52px;
    --datetime-picker-height: 75px;
    --datetime-picker-box-width: 580px;
    --selected-width: 56px;
    --default-border: 1px;
    --default-double-border: 2px;
    --default-tri-border: 3px;
    --max-width-view: 100vw;
    --half-width-view: 50vw;
    --max-height-view: 100vh;
    --none-radius: 0;
    --radius-50-percent: 50%;
    --small-radius: 8px;
    --medium-radius: 16px;
    --default-radius: 20px;
    --half-position: 50%;
    --default-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
    --mini-shadow: 0px 1.5px 3px rgba(0, 0, 0, .161);
    --small-shadow: 0px 0px 10px rgba(0, 0, 0, .161);
    --normal-shadow: 0px 3px 6px rgba(0, 0, 0, .161);
    --middle-shadow: 0px 0px 20px rgba(0, 0, 0, .161);
    --box-of-shadow: 0px 3px 10px rgba(0, 0, 0, .161);
    --box-minium-of-shadow: 0px 1.5px 5px rgba(0, 0, 0, .161);
    --box-reward-of-shadow: 0px 3px 15px rgba(0, 0, 0, .161);
    --box-mini-reward-of-shadow: 0px 1.5px 7.5px rgba(0, 0, 0, .161);
    --box-percent-reward-shadow: 0px 5px 30px rgba(0, 0, 0, .161);
    --box-mini-percent-reward-shadow: 0px 2.5px 15px rgba(0, 0, 0, .161);
    --rightbar-shawdow: 0px 10px 20px rgba(0, 0, 0, .302);
    --rightbar-mini-shawdow: 0px 5px 10px rgba(0, 0, 0, .302);
    --appointment-area-shadow: 0px 5px 10px rgba(0, 0, 0, .161);
    --appointment-mini-area-shadow: 0px 2.5px 5px rgba(0, 0, 0, .161);
    --appointment-list-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
    --appointment-mini-list-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
    --datetime-picker-box-shadow: 0px 0px 10px rgba(0, 0, 0, .102);
    --datetime-picker-mini-box-shadow: 0px 0px 5px rgba(0, 0, 0, .102);
    --stroke-width: 8px;
    --stroke-middle-width: 18px;
    --root-index: 0;
    --max-index: 99999;
    --root-letter-spacing: 0;
    --default-letter-spacing: 10px;
    --deault-transaction: 0.25s;
    --rrui-white-color: #fff;
    --rrui-black-color: #000;
    --rrui-accent-color: #03b2cb;
    --rrui-accent-color-light: #2bd7f0;
    --rrui-error-color: #d30f00;
    --rrui-gray-color: #888;
    --rrui-gray-color-light: #cacaca;
    --rrui-gray-color-lightest: #f3f3f3;
    --rrui-unit: 0.6rem;
    --rrui-input-height: calc(var(--rrui-unit) * 3);
    --rrui-fullscreen-input-height: calc(var(--rrui-unit) * 4);
    --rrui-multiline-text-height: calc(var(--rrui-unit) * 7);
    --rrui-multiline-text-input-vertical-padding: calc(var(--rrui-unit) / 2);
    --rrui-input-field-side-padding: 0rem;
    --rrui-options-list-negative-side-margin: calc(var(--rrui-list-item-side-padding) - var(--rrui-input-field-side-padding));
    --rrui-input-field-background-color: var(--rrui-white-color);
    --rrui-input-field-background-color--autofill: var(--rrui-input-field-background-color);
    --rrui-input-field-background-color-focus: var(--rrui-input-field-background-color);
    --rrui-input-field-background-color-focus--autofill: var(--rrui-input-field-background-color-focus);
    --rrui-input-field-background-color-error: var(--rrui-input-field-background-color);
    --rrui-input-field-background-color-error--autofill: var(--rrui-input-field-background-color-error);
    --rrui-input-field-background-color-error-focus: var(--rrui-input-field-background-color-error);
    --rrui-input-field-background-color-error-focus--autofill: var(--rrui-input-field-background-color-error-focus);
    --rrui-input-field-shadow-radius--autofill: 1000px;
    --rrui-input-field-background-color-disabled: var(--rrui-input-field-background-color);
    --rrui-input-field-transition: border 0.1s;
    --rrui-input-field-text-color: var(--rrui-black-color);
    --rrui-input-field-font-size: inherit;
    --rrui-input-field-icon-size: calc(var(--rrui-input-height) - var(--rrui-unit) * 1.5);
    --rrui-input-field-icon-margin-right: calc(var(--rrui-unit) * 0.75);
    --rrui-input-field-icon-margin-left: 0px;
    --rrui-input-field-icon-color: var(--rrui-gray-color);
    --rrui-button-side-padding: 0rem;
    --rrui-button-border-width: 0px;
    --rrui-button-border-color: var(--rrui-accent-color);
    --rrui-button-border-radius: 0rem;
    --rrui-button-busy-indicator-width: 0.1em;
    --rrui-button-busy-indicator-bottom: calc(50% - 0.7em);
    --rrui-button-background-color: transparent;
    --rrui-button-text-color: var(--rrui-accent-color);
    --rrui-button-transition: none;
    --rrui-button-background-color-active: var(--rrui-button-background-color);
    --rrui-button-text-color-active: var(--rrui-accent-color-light);
    --rrui-collapsible-menu-item-side-padding: calc(var(--rrui-unit) * 2.5);
    --rrui-expandable-menu-item-side-padding: var(--rrui-collapsible-menu-item-side-padding);
    --rrui-snackbar-height: calc(var(--rrui-unit) * 4);
    --rrui-snackbar-side-padding: calc(var(--rrui-unit) * 1.5);
    --rrui-snackbar-margin: calc(var(--rrui-unit) * 2);
    --rrui-snackbar-border-radius: var(--rrui-border-radius-small);
    --rrui-snackbar-background-color: var(--rrui-black-color);
    --rrui-snackbar-text-color: var(--rrui-white-color);
    --rrui-snackbar-notifications-count-size: 1.4em;
    --rrui-snackbar-notifications-count-border-color: currentColor;
    --rrui-snackbar-notifications-count-background-color: var(--rrui-snackbar-background-color);
    --rrui-snackbar-close-button-color: var(--rrui-gray-color-lightest);
    --rrui-snackbar-close-button-color-active: var(--rrui-gray-color-light);
    --rrui-tooltip-side-padding: calc(var(--rrui-unit) * 1.5);
    --rrui-tooltip-height: calc(var(--rrui-unit) * 4);
    --rrui-tooltip-animation-duration: 120ms;
    --rrui-tooltip-visible-distance: 0.2em;
    --rrui-tooltip-hidden-distance: 0.5em;
    --rrui-tooltip-border-radius: var(--rrui-border-radius-small);
    --rrui-tooltip-background-color: var(--rrui-black-color);
    --rrui-tooltip-text-color: var(--rrui-white-color);
    --rrui-tooltip-opacity: 1;
    --rrui-control-label-margin: var(--rrui-unit);
    --rrui-slideout-menu-animation-duration: 220ms;
    --rrui-close-margin: calc(var(--rrui-unit) * 2);
    --rrui-close-size: calc(var(--rrui-unit) * 2);
    --rrui-menu-button-animation-duration: 0.25s;
    --rrui-border-radius-big: 0.2rem;
    --rrui-border-radius-small: 0.1rem;
    --rrui-card-background-color: var(--rrui-white-color);
    --rrui-card-text-color: var(--rrui-black-color);
    --rrui-input-field-border-radius: 0rem;
    --rrui-input-field-border-width: 0px;
    --rrui-input-field-border-bottom-width: 1px;
    --rrui-input-field-border-color: var(--rrui-gray-color-light);
    --rrui-input-field-border-color-disabled: var(--rrui-input-field-border-color);
    --rrui-input-field-border-color-focus: var(--rrui-accent-color);
    --rrui-input-field-border-color-error: var(--rrui-error-color);
    --rrui-input-field-border-color-error-focus: var(--rrui-input-field-border-color-error);
    --rrui-input-label-focus-top-offset: -70%;
    --rrui-input-label-focus-scale: 0.8;
    --rrui-input-field-label-color: var(--rrui-gray-color);
    --rrui-input-field-label-color-focus: var(--rrui-accent-color);
    --rrui-input-field-label-color-error: var(--rrui-error-color);
    --rrui-expandable-transition-hide: all 150ms ease-out;
    --rrui-expandable-transition-show: all 150ms cubic-bezier(0.23, 1, 0.32, 1);
    --rrui-expandable-transform-hide: scaleY(0.8);
    --rrui-expandable-transform-show: scaleY(1);
    --rrui-expandable-transform-origin: 50% top 0px;
    --rrui-expandable-transform-origin-upward: 50% bottom 0px;
    --rrui-expandable-content-transition: opacity 100ms ease-out;
    --rrui-expandable-content-opacity-hide: 0;
    --rrui-expandable-margin: 1em;
    --rrui-expandable-fade-distance: 0.5em;
    --rrui-select-toggler-text-color-active: var(--rrui-accent-color);
    --rrui-select-toggler-text-color-empty: var(--rrui-gray-color);
    --rrui-select-toggler-transition: color 30ms ease-out;
    --rrui-list-vertical-padding: var(--rrui-unit);
    --rrui-list-item-height: calc(var(--rrui-unit) * 4);
    --rrui-list-item-side-padding: calc(var(--rrui-unit) * 1.5);
    --rrui-list-item-icon-margin: var(--rrui-unit);
    --rrui-list-item-background-color: var(--rrui-card-background-color);
    --rrui-list-item-text-color: var(--rrui-card-text-color);
    --rrui-list-item-background-color-focus: var(--rrui-gray-color-lightest);
    --rrui-list-item-text-color-focus: var(--rrui-list-item-text-color);
    --rrui-list-item-background-color-selected: var(--rrui-accent-color);
    --rrui-list-item-text-color-selected: var(--rrui-white-color);
    --rrui-select-arrow-color: var(--rrui-gray-color);
    --rrui-select-arrow-opacity: 0.6;
    --rrui-select-arrow-border-width: 0.35em 0.22em 0 0.22em;
    --rrui-select-arrow-margin-top: 0.1em;
    --rrui-select-arrow-margin-left: calc(var(--rrui-unit) * 2 / 3);
    --rrui-select-arrow-margin-right: calc(var(--rrui-unit) * 2 / 3);
    --rrui-checkbox-size: 0.9em;
    --rrui-checkbox-stroke-color: var(--rrui-black-color);
    --rrui-checkbox-fill-color: var(--rrui-input-field-background-color);
    --rrui-checkbox-fill-color-error: var(--rrui-input-field-background-color-error);
    --rrui-checkbox-color-focus: var(--rrui-accent-color);
    --rrui-checkbox-color-checked: var(--rrui-accent-color);
    --rrui-checkbox-color-checked-focus: var(--rrui-checkbox-color-focus);
    --rrui-checkbox-color-active: var(--rrui-accent-color-light);
    --rrui-checkbox-focus-ring-size: 250%;
    --rrui-checkbox-focus-ring-background-color: transparent;
    --rrui-checkbox-focus-ring-background-color-active: transparent;
    --rrui-modal-padding: calc(var(--rrui-unit) * 2.5);
    --rrui-modal-padding--horizontal: var(--rrui-modal-padding);
    --rrui-modal-padding--vertical: calc(var(--rrui-modal-padding) - var(--rrui-unit) * 0.5);
    --rrui-modal-border-radius: var(--rrui-border-radius-big);
    --rrui-modal-background-color: var(--rrui-card-background-color);
    --rrui-modal-text-color: var(--rrui-card-text-color);
    --rrui-modal-close-button-background-color-focus: var(--rrui-gray-color-lightest);
    --rrui-slide-out-menu-background-color: var(--rrui-black-color);
    --rrui-slide-out-menu-text-color: var(--rrui-white-color);
    --rrui-slide-out-menu-background-color-active: var(--rrui-accent-color);
    --rrui-slide-out-menu-text-color-active: var(--rrui-slide-out-menu-text-color);
    --rrui-switch-width: 1.65em;
    --rrui-switch-height: 1em;
    --rrui-switch-clickable-padding: calc(var(--rrui-unit) / 2);
    --rrui-switch-focus-outline-shadow: 0 0 0 0 transparent;
    --rrui-switch-background-color: var(--rrui-checkbox-fill-color);
    --rrui-switch-accent-color: var(--rrui-checkbox-color-checked);
    --rrui-switch-label-color-on: initial;
    --rrui-switch-groove-border-color: rgba(0, 0, 0, .16);
    --rrui-switch-groove-border-width: 0.0625em;
    --rrui-switch-groove-transition: all 0.40s cubic-bezier(.17, .67, .43, .98);
    --rrui-switch-knob-size: 0.875em;
    --rrui-switch-knob-translate-on: calc(var(--rrui-switch-width) - var(--rrui-switch-knob-size) - var(--rrui-switch-height) + var(--rrui-switch-knob-size));
    --rrui-switch-knob-transition: all 0.25s ease-out;
    --rrui-switch-knob-box-shadow: inset 0 0 0 0.03em rgba(0, 0, 0, .3), 0 0 0.05em rgba(0, 0, 0, .05), 0 0.1em 0.2em rgba(0, 0, 0, .2);
    --rrui-switch-knob-border-color-focus: var(--rrui-accent-color);
    --rrui-switch-knob-background-color: var(--rrui-switch-background-color);
    --rrui-switch-knob-background-color-on: var(--rrui-switch-knob-background-color);
    --rrui-switcher-border-radius: var(--rrui-border-radius-big);
    --rrui-switcher-background-color: transparent;
    --rrui-switcher-text-color: var(--rrui-accent-color);
    --rrui-switcher-background-color-active: var(--rrui-accent-color-light);
    --rrui-switcher-text-color-active: var(--rrui-white-color);
    --rrui-switcher-background-color-selected: var(--rrui-accent-color);
    --rrui-switcher-text-color-selected: var(--rrui-white-color);
    --rrui-date-picker-calendar-day-color-outside: var(--rrui-gray-color);
    --rrui-date-picker-calendar-day-color-disabled: var(--rrui-gray-color-light);
    --rrui-date-picker-calendar-day-color-active: var(--rrui-white-color);
    --rrui-date-picker-calendar-day-background-color-active: var(--rrui-accent-color-light);
    --rrui-date-picker-calendar-day-color-selected: var(--rrui-white-color);
    --rrui-date-picker-calendar-day-background-color-selected: var(--rrui-accent-color);
    --rrui-date-picker-calendar-day-color-focus: var(--rrui-list-item-text-color-focus);
    --rrui-date-picker-calendar-day-background-color-focus: var(--rrui-list-item-background-color-focus);
    --rrui-date-picker-calendar-border-color-focus: var(--rrui-input-field-border-color-focus);
    --rrui-date-picker-calendar-weekday-color: var(--rrui-gray-color);
    --rrui-date-picker-calendar-day-color--today: #d0021b;
    --rrui-date-picker-calendar-day-font-weight--today: 700;
    --rrui-expansion-panel-background-color: var(--rrui-white-color);
    --rrui-expansion-panel-header-height: auto;
    --rrui-expansion-panel-header-height-expanded: var(--rrui-expansion-panel-header-height);
    --rrui-expansion-panel-animation-duration: 210ms;
    --rrui-expansion-panel-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --rrui-expansion-panel-padding-left: 0px;
    --rrui-expansion-panel-padding-right: 0px;
    --rrui-expansion-panel-content-padding-top: calc(var(--rrui-unit) * 2);
    --rrui-expansion-panel-content-padding-bottom: calc(var(--rrui-unit) * 2);
    --rrui-expansion-panel-toggle-icon-width: 0.65em;
    --rrui-expansion-panel-toggle-icon-rotate: -90deg;
    --rrui-expansion-panel-toggle-icon-rotate-expanded: 0deg;
    --rrui-expansion-panel-toggle-icon-margin: 0.5em;
    --rrui-menu-icon-bar-thickness: 2px;
    --rrui-z-index-overlay: 100;
    --rrui-z-index-above-overlay: 101;
    --vh: 1;
    --scale: 100;
    --px-2: calc(2px * var(--scale) / 100);
    --px-4: calc(4px * var(--scale) / 100);
    --px-5: calc(5px * var(--scale) / 100);
    --px-6: calc(6px * var(--scale) / 100);
    --px-8: calc(8px * var(--scale) / 100);
    --px-10: calc(10px * var(--scale) / 100);
    --px-12: calc(12px * var(--scale) / 100);
    --px-13: calc(13px * var(--scale) / 100);
    --px-14: calc(14px * var(--scale) / 100);
    --px-15: calc(15px * var(--scale) / 100);
    --px-16: calc(16px * var(--scale) / 100);
    --px-17: calc(17px * var(--scale) / 100);
    --px-18: calc(18px * var(--scale) / 100);
    --px-20: calc(20px * var(--scale) / 100);
    --px-22: calc(22px * var(--scale) / 100);
    --px-23: calc(23px * var(--scale) / 100);
    --px-24: calc(24px * var(--scale) / 100);
    --px-25: calc(25px * var(--scale) / 100);
    --px-26: calc(26px * var(--scale) / 100);
    --px-28: calc(28px * var(--scale) / 100);
    --px-30: calc(30px * var(--scale) / 100);
    --px-32: calc(32px * var(--scale) / 100);
    --px-33: calc(33px * var(--scale) / 100);
    --px-35: calc(35px * var(--scale) / 100);
    --px-36: calc(36px * var(--scale) / 100);
    --px-40: calc(40px * var(--scale) / 100);
    --px-42: calc(42px * var(--scale) / 100);
    --px-44: calc(44px * var(--scale) / 100);
    --px-45: calc(45px * var(--scale) / 100);
    --px-48: calc(48px * var(--scale) / 100);
    --px-50: calc(50px * var(--scale) / 100);
    --px-52: calc(52px * var(--scale) / 100);
    --px-55: calc(55px * var(--scale) / 100);
    --px-60: calc(60px * var(--scale) / 100);
    --px-68: calc(68px * var(--scale) / 100);
    --px-64: calc(64px * var(--scale) / 100);
    --px-65: calc(65px * var(--scale) / 100);
    --px-70: calc(70px * var(--scale) / 100);
    --px-73: calc(73px * var(--scale) / 100);
    --px-75: calc(75px * var(--scale) / 100);
    --px-80: calc(80px * var(--scale) / 100);
    --px-85: calc(85px * var(--scale) / 100);
    --px-88: calc(88px * var(--scale) / 100);
    --px-89: calc(89px * var(--scale) / 100);
    --px-90: calc(90px * var(--scale) / 100);
    --px-95: calc(95px * var(--scale) / 100);
    --px-100: calc(100px * var(--scale) / 100);
    --px-105: calc(105px * var(--scale) / 100);
    --px-108: calc(108px * var(--scale) / 100);
    --px-110: calc(110px * var(--scale) / 100);
    --px-115: calc(115px * var(--scale-keyboard) / 100);
    --px-120: calc(120px * var(--scale) / 100);
    --px-122: calc(122px * var(--scale) / 100);
    --px-125: calc(125px * var(--scale) / 100);
    --px-130: calc(130px * var(--scale) / 100);
    --px-135: calc(130px * var(--scale) / 100);
    --px-136: calc(136px * var(--scale) / 100);
    --px-140: calc(140px * var(--scale) / 100);
    --px-145: calc(145px * var(--scale) / 100);
    --px-150: calc(150px * var(--scale) / 100);
    --px-155: calc(155px * var(--scale) / 100);
    --px-157: calc(157px * var(--scale) / 100);
    --px-160: calc(160px * var(--scale) / 100);
    --px-165: calc(165px * var(--scale) / 100);
    --px-168: calc(168px * var(--scale) / 100);
    --px-175: calc(175px * var(--scale) / 100);
    --px-180: calc(180px * var(--scale) / 100);
    --px-185: calc(185px * var(--scale) / 100);
    --px-190: calc(190px * var(--scale) / 100);
    --px-200: calc(200px * var(--scale) / 100);
    --px-210: calc(210px * var(--scale) / 100);
    --px-220: calc(220px * var(--scale) / 100);
    --px-225: calc(225px * var(--scale-keyboard) / 100);
    --px-228: calc(228px * var(--scale) / 100);
    --px-240: calc(240px * var(--scale) / 100);
    --px-250: calc(250px * var(--scale) / 100);
    --px-255: calc(255px * var(--scale) / 100);
    --px-260: calc(260px * var(--scale) / 100);
    --px-270: calc(270px * var(--scale) / 100);
    --px-280: calc(280px * var(--scale) / 100);
    --px-290: calc(290px * var(--scale) / 100);
    --px-300: calc(300px * var(--scale) / 100);
    --px-320: calc(320px * var(--scale) / 100);
    --px-340: calc(340px * var(--scale) / 100);
    --px-350: calc(350px * var(--scale) / 100);
    --px-380: calc(380px * var(--scale) / 100);
    --px-400: calc(400px * var(--scale) / 100);
    --px-440: calc(440px * var(--scale) / 100);
    --px-450: calc(450px * var(--scale) / 100);
    --px-460: calc(460px * var(--scale) / 100);
    --px-480: calc(480px * var(--scale) / 100);
    --px-500: calc(500px * var(--scale) / 100);
    --px-550: calc(550px * var(--scale) / 100);
    --px-570: calc(570px * var(--scale) / 100);
    --px-600: calc(600px * var(--scale) / 100);
    --px-620: calc(620px * var(--scale) / 100);
    --px-640: calc(640px * var(--scale) / 100);
    --px-650: calc(650px * var(--scale) / 100);
    --px-690: calc(690px * var(--scale) / 100);
    --px-700: calc(700px * var(--scale) / 100);
    --px-710: calc(710px * var(--scale) / 100);
    --px-800: calc(800px * var(--scale) / 100);
    --px-820: calc(820px * var(--scale) / 100);
    --px-900: calc(900px * var(--scale) / 100);
    --px-950: calc(950px * var(--scale) / 100);
    --px-970: calc(970px * var(--scale) / 100);
    --px-988: calc(988px * var(--scale) / 100);
    --px-998: calc(998px * var(--scale) / 100);
    --px-1100: calc(1100px * var(--scale) / 100);
    --px-1200: calc(1200px * var(--scale) / 100);
    --shadow-1: 0px 0px 2px 0px hsla(0, 0%, 77%, .3), 0px 1px 3px 1px rgba(60, 64, 67, .15);
    --shadow-5: 0px 4px 4px 0px rgba(60, 64, 67, .3), 0px 8px 12px 6px rgba(60, 64, 67, .15);
    --s-8: calc(8px * var(--scale) / 100) /calc(11px * var(--scale) / 100) "Muli", sans-serif;
    --s-10: calc(10px * var(--scale) / 100) /calc(13px * var(--scale) / 100) "Muli", sans-serif;
    --s-11: calc(11px * var(--scale) / 100) /calc(14px * var(--scale) / 100) "Muli", sans-serif;
    --s-12: calc(12px * var(--scale) / 100) /calc(15px * var(--scale) / 100) "Muli", sans-serif;
    --s-13: calc(13px * var(--scale) / 100) /calc(16px * var(--scale) / 100) "Muli", sans-serif;
    --s-14: calc(14px * var(--scale) / 100) /calc(15px * var(--scale) / 100) "Muli", sans-serif;
    --s-15: calc(15px * var(--scale) / 100) /calc(19px * var(--scale) / 100) "Muli", sans-serif;
    --s-16: calc(16px * var(--scale) / 100) /calc(19px * var(--scale) / 100) "Muli", sans-serif;
    --s-17: calc(17px * var(--scale) / 100) /calc(20px * var(--scale) / 100) "Muli", sans-serif;
    --s-18: calc(18px * var(--scale) / 100) /calc(22px * var(--scale) / 100) "Muli", sans-serif;
    --s-19: calc(19px * var(--scale) / 100) /calc(23px * var(--scale) / 100) "Muli", sans-serif;
    --s-20: calc(20px * var(--scale) / 100) /calc(24px * var(--scale) / 100) "Muli", sans-serif;
    --s-21: calc(21px * var(--scale) / 100) /calc(25px * var(--scale) / 100) "Muli", sans-serif;
    --s-22: calc(22px * var(--scale) / 100) /calc(27px * var(--scale) / 100) "Muli", sans-serif;
    --s-24: calc(24px * var(--scale) / 100) /calc(37px * var(--scale) / 100) "Muli", sans-serif;
    --s-25: calc(25px * var(--scale) / 100) /calc(30px * var(--scale) / 100) "Muli", sans-serif;
    --s-26: calc(26px * var(--scale) / 100) /calc(32px * var(--scale) / 100) "Muli", sans-serif;
    --s-28: calc(28px * var(--scale) / 100) /calc(34px * var(--scale) / 100) "Muli", sans-serif;
    --s-30: calc(30px * var(--scale) / 100) /calc(37px * var(--scale) / 100) "Muli", sans-serif;
    --s-32: calc(32px * var(--scale) / 100) /calc(39px * var(--scale) / 100) "Muli", sans-serif;
    --s-40: calc(40px * var(--scale) / 100) /calc(50px * var(--scale) / 100) "Muli", sans-serif;
    --s-45: calc(45px * var(--scale) / 100) /calc(55px * var(--scale) / 100) "Muli", sans-serif;
    --s-50: calc(50px * var(--scale) / 100) /calc(61px * var(--scale) / 100) "Muli", sans-serif;
    --s-54: calc(54px * var(--scale) / 100) /calc(66px * var(--scale) / 100) "Muli", sans-serif;
    --s-80: calc(80px * var(--scale) / 100) /calc(98px * var(--scale) / 100) "Muli", sans-serif;
    --main-color: #e8d9ff;
    --text: #fff;
    --bg-main: #f3f3f6;
    --blur: blur(10px);
    --bg-blur: #ffffff30;
    --bg-blur-black: #292c2d99;
    --mainfont: var(--text);
    --bg-blur-90: #ffffff90;
    --bg-blur-50: #0000003d;
    --bg-img: url(/static/media/spos.svg);
    --square: var(--px-40);
    --square-border: var(--px-8);
    --square-border-m: calc(var(--px-8) * -1);
    --square-border-r: calc(var(--square) / 2 + var(--square-border))
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form-pad-phone-right {
    /*height: 90%;*/
    /*width: 90%;*/
    display: flex;
    flex-direction: column;
    /*background: #fff;*/
    /*padding-top: var(--px-100);*/
    /*padding-bottom: var(--px-100);*/
    border-radius: var(--px-32);
    /*margin: 20px*/
}

.hone-slider-area-left {
    position: absolute;
    right: 20px;
    display: block;
    width: 30%;
    height: 420px;
    background: transparent linear-gradient(90deg, rgba(255, 205, 0, 0), var(--yellow)) 0 0 no-repeat padding-box;
    opacity: 1;
    margin-left: 38%;
    z-index: 1000
}

.hone-slider-area-left-mac {
    background: transparent linear-gradient(90deg, rgba(57, 57, 57, 0), #393939) 0 0 no-repeat padding-box !important
}

.hone-slider-area-right {
    position: absolute;
    left: 0;
    display: block;
    width: 30%;
    height: 420px;
    background: transparent linear-gradient(270deg, rgba(255, 205, 0, 0), var(--yellow)) 0 0 no-repeat padding-box;
    opacity: 1
}

.hone-slider-area-right-mac {
    background: transparent linear-gradient(270deg, rgba(57, 57, 57, 0), #393939) 0 0 no-repeat padding-box !important
}

.qr-code-area .home-qr-page-text {
    font-weight: bolder !important;
    color: var(--color-900) !important;
    font-size: 15px !important;
    margin-bottom: -1px !important;
}
.qr-code-area .home-qr-page-text-no-Phone{
    font-weight: bolder !important;
    color: var(--color-900) !important;
    font-size: 25px !important;
    margin-top: 15px !important;
    cursor: pointer;
}
.qr-code-area #qrcode-demo{
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.numberphone-input-area {
    flex: 1;
    display: flex;
    gap: var(--px-10);
    flex-direction: column;
}

.login-header-area {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--px-20);
    font-size: var(--px-16);
    font-weight: 600;
    text-transform: capitalize;
    color: var(--color-title);
}

.login-header-area-div {
    color: var(--bluemango);
    text-transform: uppercase;
    font-size: 25px;
    font: normal normal 700 25px/25px Muli, sans-serif;
    letter-spacing: 0;
    text-align: center;
    border-bottom: 2px dotted rgba(0, 0, 0, .2);
    width: 90%;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px
}

.form_label {
    border: 1px solid #ccc;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
}

.home-information-button {
    margin-top: var(--px-12);
}

.login-logo {
    max-height: 100px;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 100%
}

.login-header-title .title {
    color: black;
    font: normal normal 600 var(--s-17)
}

.login-header-title .title.phonenumber {
    font: normal normal 700 var(--s-22);
    color: #fff
}

.login-header-title .title.information {
    max-width: var(--max-width-view)
}

.login-header-title .title.birthday {
    max-width: calc(var(--max-width-view) - 74vw)
}

.form-key-board-input-checkin {
    display: flex;
    gap: var(--px-44);
    flex-direction: column
}

.form-key-board-checkin {
    display: grid;
    border-radius: 4px;
    grid-gap: var(--px-18);
    justify-content: center;
    grid-template-rows:repeat(4, minmax(var(--px-150), var(--px-150)));
    grid-template-columns:repeat(3, minmax(var(--px-150), var(--px-150)))
}

@media screen and (min-width: 1024px) {
    .form-key-board-checkin {
        grid-template-rows: repeat(4, minmax(var(--px-100), var(--px-100)));
        grid-template-columns: repeat(3, minmax(var(--px-100), var(--px-100)));
        grid-gap: var(--px-28);
    }
}
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .form-key-board-checkin {
        grid-template-rows: repeat(4, minmax(var(--px-100), var(--px-100)));
        grid-template-columns: repeat(3, minmax(var(--px-100), var(--px-100)));
        grid-gap: 16px;
    }
}

    .form-key-board-checkin .key.clear:hover, .form-key-board-checkin .key.delete:hover {
        background: unset
    }

    .form-key-board-checkin .key.delete i {
        font-size: var(--px-28)
    }

    .form-key-board-checkin .key:hover {
        background: #bdbdbd
    }

    .form-key-board-checkin .key:active {
        transform: scale(.98)
    }

    @media screen and (min-width: 1366px) {
        .form-key-board-checkin .key {
            font: normal normal 600 var(--s-40);
            border-radius: 9999px;
        }

        .form-key-board-checkin {
            grid-template-rows: repeat(4, minmax(var(--px-120), var(--px-120)));
            grid-template-columns: repeat(3, minmax(var(--px-120), var(--px-120)));
            grid-gap: var(--px-20);
        }

        .numberphone-input-area {
            justify-content: unset;
        }

        .qr-view-logo {
            /*margin-bottom: 2rem;*/
        }
    }

    .numberphone-input-area .keyboard-area {
        display: flex;
        margin: 2.125em auto auto;
        flex-wrap: wrap;
        justify-content: center;
        max-width: calc(var(--number-keyboard-area) / 2.5)
    }

        .numberphone-input-area .keyboard-area .key {
            display: inherit;
            width: 91px;
            height: 91px;
            font-size: calc(var(--big-font-size) - 2.5px);
            font-family: Muli, sans-serif;
            line-height: calc(var(--big-line-height) / 2 + 4.5px);
            margin-right: calc(var(--superbig-spacing) / 2 - 1px);
            margin-bottom: calc(var(--normal-spacing) / 6 + 2px);
            border-radius: var(--radius-50-percent);
            -webkit-border-radius: var(--radius-50-percent);
            -moz-border-radius: var(--radius-50-percent);
            -ms-border-radius: var(--radius-50-percent);
            -o-border-radius: var(--radius-50-percent);
            border: var(--default-double-border) solid var(--grey-normal);
            justify-content: center;
            align-items: center;
            cursor: pointer;
            letter-spacing: 0;
            opacity: 1;
            font-weight: 600;
            font-stretch: expanded
        }

            .numberphone-input-area .keyboard-area .key.non-tap {
                pointer-events: none
            }

            .numberphone-input-area .keyboard-area .key:hover {
                box-shadow: var(--middle-shadow);
                -webkit-box-shadow: var(--small-shadow);
                -moz-box-shadow: var(--small-shadow);
                -ms-box-shadow: var(--small-shadow);
                -o-box-shadow: var(--small-shadow);
                transition: var(--deault-transaction);
                -webkit-transition: var(--deault-transaction);
                -moz-transition: var(--deault-transaction);
                -ms-transition: var(--deault-transaction);
                -o-transition: var(--deault-transaction)
            }

            .numberphone-input-area .keyboard-area .key:active {
                background: var(--grey-thin-10percent);
                border: none
            }

            .numberphone-input-area .keyboard-area .key .delete-button {
                width: calc(var(--number-keyboard-delete-width) / 1.5)
            }

            .numberphone-input-area .keyboard-area .key:nth-child(3n) {
                margin-right: var(--root-spacing)
            }

            .numberphone-input-area .keyboard-area .key:nth-child(n+9) {
                margin-bottom: var(--root-spacing)
            }

    .input-mask-cmp {
        border: none;
        text-align: center;
        color: #1850b5;
        letter-spacing: 1px;
        background: transparent;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 30px;
        line-height: 1;
        font-family: Montserrat;
    }

        .input-mask-cmp:active, .input-mask-cmp:focus, .input-mask-cmp:hover {
            outline: var(--root-spacing)
        }

        .input-mask-cmp::-moz-placeholder {
            color: #000;
            text-transform: capitalize;
            font: normal normal 400 var(--s-20)
        }

        .input-mask-cmp::placeholder {
            color: #000;
            text-transform: capitalize;
            font: normal normal 400 var(--s-20)
        }

    .z {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 150px);
        grid-gap: 2rem
    }

    .home-area .square {
        background: unset;
        position: absolute;
        width: var(--px-40);
        border-color: #fff;
        border-style: solid;
        height: var(--px-40);
        border-radius: 0 0 var(--square-border-r) 0;
        border-width: 0 var(--square-border) var(--square-border) 0
    }

        .home-area .square.top-right {
            top: calc(var(--px-100) - (var(--square) - var(--square-border)));
            right: var(--square-border-m)
        }

        .home-area .square.bottom-right {
            bottom: var(--square-border-m);
            left: calc(60% - (var(--square) - var(--square-border)))
        }

    .form-wizard {
        color: #888
    }

        .form-wizard .wizard-form-radio {
            display: inline-block;
            margin-left: 5px;
            position: relative
        }

            .form-wizard .wizard-form-radio input[type=radio] {
                -webkit-appearance: none;
                -moz-appearance: none;
                -o-appearance: none;
                appearance: none;
                background-color: #ddd;
                height: 25px;
                width: 25px;
                display: inline-block;
                vertical-align: middle;
                border-radius: 50%;
                position: relative;
                cursor: pointer
            }

                .form-wizard .wizard-form-radio input[type=radio]:focus {
                    outline: 0
                }

                .form-wizard .wizard-form-radio input[type=radio]:checked {
                    background-color: #fb1647
                }

                    .form-wizard .wizard-form-radio input[type=radio]:checked:before {
                        content: "";
                        position: absolute;
                        width: 10px;
                        height: 10px;
                        display: inline-block;
                        background-color: #fff;
                        border-radius: 50%;
                        left: 1px;
                        right: 0;
                        margin: 0 auto;
                        top: 8px
                    }

                    .form-wizard .wizard-form-radio input[type=radio]:checked:after {
                        display: inline-block;
                        webkit-animation: click-radio-wave .65s;
                        animation: click-radio-wave .65s;
                        background: #000;
                        content: "";
                        display: block;
                        position: relative;
                        z-index: 100;
                        border-radius: 50%
                    }

                .form-wizard .wizard-form-radio input[type=radio] ~ label {
                    padding-left: 10px;
                    cursor: pointer
                }

        .form-wizard .form-wizard-header {
            text-align: center
        }

        .form-wizard .form-wizard-next-btn, .form-wizard .form-wizard-previous-btn, .form-wizard .form-wizard-submit {
            background-color: #d65470;
            color: #fff;
            display: inline-block;
            min-width: 120px;
            padding: 10px;
            text-align: center
        }

            .form-wizard .form-wizard-next-btn:focus, .form-wizard .form-wizard-next-btn:hover, .form-wizard .form-wizard-previous-btn:focus, .form-wizard .form-wizard-previous-btn:hover, .form-wizard .form-wizard-submit:focus, .form-wizard .form-wizard-submit:hover {
                color: #fff;
                opacity: .6;
                text-decoration: none
            }

        .form-wizard .wizard-fieldset {
            display: none
        }

            .form-wizard .wizard-fieldset.show {
                display: block
            }

        .form-wizard .wizard-form-error {
            display: none;
            background-color: #d70b0b;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            width: 100%
        }

        .form-wizard .form-wizard-previous-btn {
            background-color: #fb1647
        }

        .form-wizard .form-control {
            font-weight: 300;
            height: auto !important;
            padding: 15px;
            color: #888;
            background-color: #f1f1f1;
            border: none
        }

            .form-wizard .form-control:focus {
                box-shadow: none
            }

        .form-wizard .form-group {
            position: relative;
            margin: 25px 0
        }

        .form-wizard .wizard-form-text-label {
            position: absolute;
            left: 10px;
            top: 16px;
            transition: all .2s linear
        }

        .form-wizard .focus-input .wizard-form-text-label {
            color: #d65470;
            top: -18px;
            transition: all .2s linear;
            font-size: 12px
        }

        .form-wizard .form-wizard-steps {
            margin: 0
        }

            .form-wizard .form-wizard-steps li {
                width: 33%;
                float: left;
                position: relative
            }

                .form-wizard .form-wizard-steps li:after {
                    background-color: #f3f3f3;
                    content: "";
                    height: 5px;
                    left: 0;
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 100%;
                    border-bottom: 1px solid #ddd;
                    border-top: 1px solid #ddd
                }

                .form-wizard .form-wizard-steps li span {
                    background-color: #ddd;
                    border-radius: 50%;
                    display: inline-block;
                    height: 40px;
                    line-height: 40px;
                    position: relative;
                    text-align: center;
                    width: 40px;
                    z-index: 1
                }

                .form-wizard .form-wizard-steps li:last-child:after {
                    width: 50%
                }

                .form-wizard .form-wizard-steps li.activated span, .form-wizard .form-wizard-steps li.active span {
                    background-color: #d65470;
                    color: #fff
                }

                .form-wizard .form-wizard-steps li.activated:after, .form-wizard .form-wizard-steps li.active:after {
                    background-color: #d65470;
                    left: 50%;
                    width: 50%;
                    border-color: #d65470
                }

                .form-wizard .form-wizard-steps li.activated:after {
                    width: 100%;
                    border-color: #d65470
                }

                .form-wizard .form-wizard-steps li:last-child:after {
                    left: 0
                }

        .form-wizard .wizard-password-eye {
            position: absolute;
            right: 32px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer
        }

    @keyframes click-radio-wave {
        0% {
            width: 25px;
            height: 25px;
            opacity: .35;
            position: relative
        }

        to {
            width: 60px;
            height: 60px;
            margin-left: -15px;
            margin-top: -15px;
            opacity: 0
        }
    }

    @media screen and (max-width: 767px) {
        .wizard-content-left {
            height: auto
        }
    }

    .list-unstyled {
        padding-left: 0;
        list-style: none
    }

    .clearfix:after {
        display: block;
        clear: both;
        content: ""
    }

    *, :after, :before {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:;
        --tw-pan-y:;
        --tw-pinch-zoom:;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:;
        --tw-gradient-via-position:;
        --tw-gradient-to-position:;
        --tw-ordinal:;
        --tw-slashed-zero:;
        --tw-numeric-figure:;
        --tw-numeric-spacing:;
        --tw-numeric-fraction:;
        --tw-ring-inset:;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59, 130, 246, .5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur:;
        --tw-brightness:;
        --tw-contrast:;
        --tw-grayscale:;
        --tw-hue-rotate:;
        --tw-invert:;
        --tw-saturate:;
        --tw-sepia:;
        --tw-drop-shadow:;
        --tw-backdrop-blur:;
        --tw-backdrop-brightness:;
        --tw-backdrop-contrast:;
        --tw-backdrop-grayscale:;
        --tw-backdrop-hue-rotate:;
        --tw-backdrop-invert:;
        --tw-backdrop-opacity:;
        --tw-backdrop-saturate:;
        --tw-backdrop-sepia:
    }

    ::backdrop {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:;
        --tw-pan-y:;
        --tw-pinch-zoom:;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:;
        --tw-gradient-via-position:;
        --tw-gradient-to-position:;
        --tw-ordinal:;
        --tw-slashed-zero:;
        --tw-numeric-figure:;
        --tw-numeric-spacing:;
        --tw-numeric-fraction:;
        --tw-ring-inset:;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59, 130, 246, .5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur:;
        --tw-brightness:;
        --tw-contrast:;
        --tw-grayscale:;
        --tw-hue-rotate:;
        --tw-invert:;
        --tw-saturate:;
        --tw-sepia:;
        --tw-drop-shadow:;
        --tw-backdrop-blur:;
        --tw-backdrop-brightness:;
        --tw-backdrop-contrast:;
        --tw-backdrop-grayscale:;
        --tw-backdrop-hue-rotate:;
        --tw-backdrop-invert:;
        --tw-backdrop-opacity:;
        --tw-backdrop-saturate:;
        --tw-backdrop-sepia:
    }

    .visible {
        visibility: visible
    }

    .absolute {
        position: absolute
    }

    .relative {
        position: relative
    }

    .inset-14 {
        inset: 3.5rem
    }

    .inset-20 {
        inset: 5rem
    }

    .left-\[70\%\] {
        left: 70%
    }

    .right-1\/4 {
        right: 25%
    }

    .right-5 {
        right: 1.25rem
    }

    .\!z-10 {
        z-index: 10 !important
    }

    .z-0 {
        z-index: 0
    }

    .z-10 {
        z-index: 10
    }

    .z-\[1\] {
        z-index: 1
    }

    .z-\[3\] {
        z-index: 3
    }

    .col-span-5 {
        grid-column: span 5/span 5
    }

    .col-span-7 {
        grid-column: span 7/span 7
    }

    .m-4 {
        margin: 1rem
    }

    .m-8 {
        margin: 2rem
    }

    .m-\[20px\] {
        margin: 20px
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .my-5 {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem
    }

    .mr-4 {
        margin-right: 1rem
    }

    .box-border {
        box-sizing: border-box
    }

    .inline-block {
        display: inline-block
    }

    .flex {
        display: flex
    }

    .inline-flex {
        display: inline-flex
    }

    .grid {
        display: grid
    }

    .h-10 {
        height: 2.5rem
    }

    .h-12 {
        height: 3rem
    }

    .h-14 {
        height: 3.5rem
    }

    .h-24 {
        height: 6rem
    }

    .h-5 {
        height: 1.25rem
    }

    .h-8 {
        height: 2rem
    }

    .h-\[70vh\] {
        height: 70vh
    }

    .h-\[90\%\] {
        height: 90%
    }

    .h-\[calc\(100dvh\)\] {
        height: calc(100dvh)
    }

    .h-full {
        height: 100%
    }

    .min-h-12 {
        min-height: 3rem
    }

    .min-h-screen {
        min-height: 100vh
    }

    .w-0 {
        width: 0
    }

    .w-1\/2 {
        width: 50%
    }

    .w-1\/4 {
        width: 25%
    }

    .w-12 {
        width: 3rem
    }

    .w-14 {
        width: 3.5rem
    }

    .w-3\/4 {
        width: 75%
    }

    .w-\[28\.25rem\] {
        width: 28.25rem
    }

    .w-\[40\%\] {
        width: 40%
    }

    .w-\[60\%\] {
        width: 60%
    }

    .w-\[70\%\] {
        width: 70%
    }

    .w-\[90\%\] {
        width: 90%
    }

    .w-full {
        width: 100%
    }

    .min-w-\[14rem\] {
        min-width: 14rem
    }

    .max-w-\[30vh\] {
        max-width: 30vh
    }

    .flex-1 {
        flex: 1 1 0%
    }

    .transform {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .cursor-pointer {
        cursor: pointer
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .flex-row {
        flex-direction: row
    }

    .flex-col {
        flex-direction: column
    }

    .place-content-center {
        place-content: center
    }

    .content-center {
        align-content: center
    }

    .content-between {
        align-content: space-between
    }

    .items-start {
        align-items: flex-start
    }

    .items-end {
        align-items: flex-end
    }

    .items-center {
        align-items: center
    }

    .justify-end {
        justify-content: flex-end
    }

    .justify-center {
        justify-content: center
    }

    .justify-between {
        justify-content: space-between
    }

    .justify-evenly {
        justify-content: space-evenly
    }

    .gap-2 {
        gap: .5rem
    }

    .gap-3 {
        gap: .75rem
    }

    .gap-4 {
        gap: 1rem
    }

    .self-center {
        align-self: center
    }

    .overflow-x-auto {
        overflow-x: auto
    }

    .overflow-y-auto {
        overflow-y: auto
    }

    .overflow-y-scroll {
        overflow-y: scroll
    }

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

    .text-wrap {
        text-wrap: wrap
    }

    .text-balance {
        text-wrap: balance
    }

    .\!rounded-full {
        border-radius: 9999px !important
    }

    .rounded {
        border-radius: .25rem
    }

    .rounded-2xl {
        border-radius: 1rem
    }

    .rounded-31xl {
        border-radius: 50px
    }

    .rounded-3xl {
        border-radius: 1.5rem
    }

    .rounded-full {
        border-radius: 9999px
    }

    .rounded-lg {
        border-radius: .5rem
    }

    .rounded-xl {
        border-radius: .75rem
    }

    .border {
        border-width: 1px
    }

    .border-2 {
        border-width: 2px
    }

    .border-solid {
        border-style: solid
    }

    .border-none {
        border-style: none
    }

    .border-\[\#daeeff\] {
        --tw-border-opacity: 1;
        border-color: rgb(238 238 238/var(--tw-border-opacity))
    }

    .border-\[\#F5F5F5\] {
        --tw-border-opacity: 1;
        border-color: rgb(245 245 245/var(--tw-border-opacity))
    }

    .border-\[\#fff\] {
        --tw-border-opacity: 1;
        border-color: rgb(255 255 255/var(--tw-border-opacity))
    }

    .border-gray-200 {
        --tw-border-opacity: 1;
        border-color: rgb(229 231 235/var(--tw-border-opacity))
    }

    .border-organe {
        --tw-border-opacity: 1;
        border-color: rgb(255 132 63/var(--tw-border-opacity))
    }

    .bg-\[\#1850b5\] {
        --tw-bg-opacity: 1;
        background-color: rgb(237 138 80/var(--tw-bg-opacity))
    }

    .bg-\[\#ed8c66\] {
        background-color: #ed8c66
    }

    .bg-\[\#-swift-300\] {
        --tw-bg-opacity: 1;
        background-color: rgb(240 189 149/var(--tw-bg-opacity))
    }

    .bg-\[\#f5f5f5\] {
        --tw-bg-opacity: 1;
        background-color: rgb(245 245 245/var(--tw-bg-opacity))
    }

    .bg-\[\#fae7db\] {
        --tw-bg-opacity: 1;
        background-color: rgb(250 231 219/var(--tw-bg-opacity))
    }

    .bg-\[\#fafafa\] {
        --tw-bg-opacity: 1;
        background-color: rgb(250 250 250/var(--tw-bg-opacity))
    }

    .bg-\[\#fffcf4\] {
        --tw-bg-opacity: 1;
        background-color: rgb(255 252 244/var(--tw-bg-opacity))
    }

    .bg-\[transparent\] {
        background-color: transparent
    }

    .bg-gray-200 {
        --tw-bg-opacity: 1;
        background-color: rgb(229 231 235/var(--tw-bg-opacity))
    }

    .bg-organe {
        --tw-bg-opacity: 1;
        background-color: rgb(255 132 63/var(--tw-bg-opacity))
    }

    .bg-white {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255/var(--tw-bg-opacity))
    }

    .bg-whitesmoke {
        background-color: hsla(0, 0%, 93%, .2)
    }

    .bg-gradient-to-r {
        background-image: linear-gradient(to right, var(--tw-gradient-stops))
    }

    .from-\[\#FFCB82\] {
        --tw-gradient-from: #ffcb82 var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(255, 203, 130, 0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
    }

    .to-\[\#FE835B\] {
        --tw-gradient-to: #fe835b var(--tw-gradient-to-position)
    }

    .object-cover {
        -o-object-fit: cover;
        object-fit: cover
    }

    .object-center {
        -o-object-position: center;
        object-position: center
    }

    .p-0 {
        padding: 0
    }

    .p-1 {
        padding: .25rem
    }

    .p-2 {
        padding: .5rem
    }

    .p-2\.5 {
        padding: .625rem
    }

    .p-3 {
        padding: .75rem
    }

    .p-4 {
        padding: 1rem
    }

    .p-6 {
        padding: 1.5rem
    }

    .px-2 {
        padding-left: .5rem;
        padding-right: .5rem
    }

    .px-4 {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .py-0 {
        padding-top: 0;
        padding-bottom: 0
    }

    .py-0\.5 {
        padding-top: .125rem;
        padding-bottom: .125rem
    }

    .py-1 {
        padding-top: .25rem;
        padding-bottom: .25rem
    }

    .py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem
    }

    .py-2 {
        padding-top: .5rem;
        padding-bottom: .5rem
    }

    .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem
    }

    .py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem
    }

    .py-\[1px\] {
        padding-top: 1px;
        padding-bottom: 1px
    }

    .pl-2 {
        padding-left: .5rem
    }

    .text-center {
        text-align: center
    }

    .align-middle {
        vertical-align: middle
    }

    .font-h5 {
        font-family: Montserrat
    }

    .text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem
    }

    .text-5xl {
        font-size: 3rem;
        line-height: 1
    }

    .text-\[36px\] {
        font-size: 36px
    }

    .text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    .text-sm {
        font-size: .875rem;
        line-height: 1.25rem
    }

    .text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .font-bold {
        font-weight: 700
    }

    .font-light {
        font-weight: 300
    }

    .font-medium {
        font-weight: 500
    }

    .font-semibold {
        font-weight: 600
    }

    .tracking-\[0\.07px\] {
        letter-spacing: .07px
    }

    .text-\[\#8D8D8D\] {
        --tw-text-opacity: 1;
        color: rgb(141 141 141/var(--tw-text-opacity))
    }

    .text-\[\#FD0505\] {
        --tw-text-opacity: 1;
        color: rgb(253 5 5/var(--tw-text-opacity))
    }

    .text-\[\#1850b5\] {
        --tw-text-opacity: 1;
        color: rgb(237 138 80/var(--tw-text-opacity))
    }

    .text-black {
        --tw-text-opacity: 1;
        color: rgb(52 52 52/var(--tw-text-opacity))
    }

    .text-gray-2 {
        --tw-text-opacity: 1;
        color: rgb(151 151 151/var(--tw-text-opacity))
    }

    .text-organe {
        --tw-text-opacity: 1;
        color: rgb(255 132 63/var(--tw-text-opacity))
    }

    .text-red-500 {
        --tw-text-opacity: 1;
        color: rgb(239 68 68/var(--tw-text-opacity))
    }

    .text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity))
    }

    .shadow-2xl {
        --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
        --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color)
    }

    .shadow-2xl, .shadow-\[0px_4px_4px_rgba\(0\2c _0\2c _0\2c _0\.25\)\] {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

    .shadow-\[0px_4px_4px_rgba\(0\2c _0\2c _0\2c _0\.25\)\] {
        --tw-shadow: 0px 4px 4px rgba(0, 0, 0, .25);
        --tw-shadow-colored: 0px 4px 4px var(--tw-shadow-color)
    }

    .shadow-\[2px_1px_10px_rgba\(0\2c _0\2c _0\2c _0\.1\)_inset\] {
        --tw-shadow: 2px 1px 10px rgba(0, 0, 0, .1) inset;
        --tw-shadow-colored: inset 2px 1px 10px var(--tw-shadow-color)
    }

    .shadow-\[2px_1px_10px_rgba\(0\2c _0\2c _0\2c _0\.1\)_inset\], .shadow-lg {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

    .shadow-lg {
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)
    }

    .drop-shadow-2xl {
        --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, .15))
    }

    .drop-shadow-2xl, .drop-shadow-md {
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .drop-shadow-md {
        --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, .07)) drop-shadow(0 2px 2px rgba(0, 0, 0, .06))
    }

    .\[backdrop-filter\:blur\(60px\)\] {
        -webkit-backdrop-filter: blur(60px);
        backdrop-filter: blur(60px)
    }

    .\[border\:none\] {
        border: none
    }

    .\[outline\:none\] {
        outline: none
    }

    body {
        margin: 0
    }

    .hover\:bg-chocolate:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(204 82 13/var(--tw-bg-opacity))
    }

    .form-right {
        /*    height: 100%;
    height: -moz-available;
    height: -webkit-fill-available;
    height: fill-available;
    width: 24rem;*/
    }

    html {
        height: 100%;
    }

    body {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100vh;
        overflow: hidden;
    }

    #signatureCanvas {
        width: max-content !important;
        width: -webkit-fill-available !important;
        height: max-content !important;
        height: -webkit-fill-available !important;
    }

    body {
        touch-action: manipulation;
    }

    .dis-none {
        display: none !important;
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    /* Hide scrollbar for IE, Edge and Firefox */
    .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    .popup-content-textarea {
        text-wrap: pretty;
    }

    pre {
        text-wrap: wrap;
    }

    #mobiscroll1695713147855 {
    }

    .checkinCategory.active .nameCategory {
        border-width: 5px !important;
        box-shadow: 0 0 10px rgba(241, 168, 119, 0.5);
        transform: scale(1.05);
        transition: all 0.3s ease-in-out;
    }

    @media (min-width: 1360px) {
        #signatureZ {
            min-width: 27rem;
        }
    }

    .bg-ZZZZZ {
        background-image: repeating-linear-gradient(90deg, #bce3ff, #bce3ff 12px, transparent 12px, transparent 16px);
        background-position: left top;
        background-repeat: repeat-x;
        background-size: 100% 2px;
    }