@font-face { font-family: 'Mulish_regular'; src: url('../fonts/Mulish-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Caveat-VariableFont_wght'; src: url('../fonts/Caveat-VariableFont_wght.ttf') format('truetype'); font-weight: normal; font-style: normal; } :root { --color-1: #4B9AFA; --color-1-hover: #337ed9; --color-2: #5777ba; --color-3: #222222; --color-4: #394c81; } ::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; } ::-webkit-scrollbar-thumb { border-radius: 7px; background-color: #d0d2d5; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); border: 3px transparent solid; background-clip: padding-box; display: none; } :hover::-webkit-scrollbar-thumb { display: block; } .unselect { user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; } html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; } body { padding: 15px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-size: 15px; } .lbWizardFormInputField, .lbWizardFormInputLabel, .lbWizardSlide, .lbWizardSlidesButton, .lbWizardCarouselButton, .lbWizardCarouselItem, .lbWizardCarouselGridItem, .lbWizardFormCheckbox, .lbWizardFormCheckbox:after, .lbWizardLoading { -moz-transition: all 300ms; -webkit-transition: all 300ms; } .lbWizardIntroTitle { font-family: 'Caveat-VariableFont_wght', sans-serif; } .lbWizard { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: transparent; box-sizing: border-box; width: 100%; height: 100%; min-height: 500px; outline: none; color: #222 !important; } .lbWizard a { text-decoration: none; color: #336699; } .lbWizard a:hover { text-decoration: underline; } .lbWizard button { width: unset; } .lbWizardContent { position: relative; background-color: #ffffff; border: 1px solid rgba(0,0,0,0.08); width: 100%; max-width: 1100px; height: 650px; max-height: 100%; border-radius: 10px; box-shadow: 0px 0px 20px rgb(0 0 0 / 5%); overflow: hidden; box-sizing: border-box; -moz-transition: all 300ms; -webkit-transition: all 300ms; } .lbWizardInner { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; height: 100%; -moz-transition: top left 300ms; -webkit-transition: top left 300ms; position: relative; overflow-y: hidden; background-color: #f8f8f8; } .lbWizardFit { padding: 35px 35px 35px 35px; } .lbWizardFit .lbWizardContent { max-width: unset; height: 100%; } .lbWizardForm { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%; } .lbWizardFormBody { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .lbWizardFormInputs { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; align-items: center; max-width: 500px; } .lbWizardFormInputsRow { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 20px; width: 100%; } .lbWizardFormInput { text-align: left; width: 100%; margin-bottom: 20px; } .lbWizardFormInput:last-child { margin-bottom: 0px; } .lbWizardFormInputHeader { margin-bottom: 10px; } .lbWizardFormInputTile { margin-bottom: 5px; font-size: 1em; } .lbWizardFormInputTileMini { } .lbWizardFormInputDescription { font-size: 0.9em; color: rgba(0, 0, 0, 0.7); margin-bottom: 10px; line-height: 1.3em; } .lbWizardFormInputSample { font-size: 0.8em; color: rgb(93 101 149); font-weight: normal; line-height: 1.3em; } .lbWizardFormInputField { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border: 1px solid rgba(0,0,0,0.1); position: relative; padding: 10px 5px; width: 100%; max-width: 100%; box-sizing: border-box; border-radius: 3px; } .lbWizardFormInputLabel { font-size: 1em; color: #888; padding: 10px; position: absolute; width: 100%; height: 100%; left: 0px; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box; } .lbWizardFormInputField textarea, .lbWizardFormInputField select, .lbWizardFormInputField input[type="text"], .lbWizardFormInputField input[type="file"] { border: 0px; background-color: transparent; width: 100%; height: 100%; outline: unset; padding: 0px 0 0 5px; box-sizing: border-box; font-size: 1em; position: relative; z-index: 1; border-radius: 3px; color: #000; } .lbWizardFormInputField textarea { font-family: 'Open Sans', sans-serif; height: 100px; resize: none; } .lbWizardFormInputField input[type="file"] { opacity: 0; cursor: pointer; } .lbWizardFormInputField input::placeholder, .lbWizardFormInputField textarea::placeholder { color: gray; font-style: italic; font-size: 14px; opacity: 0.7; } .lbWizardFormInputFocus .lbWizardFormInputField { box-shadow: 0 0 5px rgba(81, 155, 238, 0.5); border: 1px solid rgba(111, 177, 250, 0.5); } .lbWizardFormInputFocusVal .lbWizardFormInputLabel { font-size: 0.7em; width: unset; height: unset; top: -10px; left: 10px; background-color: #fff; color: #999; z-index: 2; border-radius: 0 0 5px 5px; padding: 0px 6px 3px 6px !important; } .lbWizardFormCheckbox { width: 35px; height: 20px; min-width: 35px; border-radius: 15px; background-color: #e5e5e5; position: relative; cursor: pointer; } .lbWizardFormCheckbox:after { content: ''; width: 15px; height: 15px; border-radius: 50%; background-color: #bbbbbb; position: absolute; top: 3px; left: 3px; } .lbWizardFormCheckboxOn { background-color: #E7F2FF; } .lbWizardFormCheckboxOn:after { background-color: var(--color-1); left: 17px; } .lbWizardFormButton { display: flex; justify-content: center; align-items: center; padding: 9px 20px; border-radius: 25px; font-size: 1em; color: #fff; cursor: pointer; box-sizing: border-box; text-align: center; outline: unset; border: 0px; width: 100px; margin-top: 20px; } .lbWizardFormButtonApply { background-color: var(--color-1); border-radius: 5px; display: inline-block; width: fit-content; margin-top: 10px; } .lbWizardSlides { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; overflow: hidden; position: relative; background-color: #fff; } .lbWizardSlideShowIntro .lbWizardInner { width: 100%; } .lbWizardSlideShowIntro .lbWizardSlides { max-width: unset; } .lbWizardSlideShowIntro .lbWizardSteps { display: none; } .lbWizardSlidesOver { visibility: hidden; opacity: 0; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(255,255,255,0.8); z-index: 1; } .lbWizardSlidesOverShow { visibility: visible; opacity: 1; } .lbWizardSlidesInner { height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; -moz-transition: all 700ms; -webkit-transition: all 700ms; margin-left: 0%; overflow: hidden; } .lbWizardSlide { visibility: hidden; opacity: 0; transform: scale(0.7); position: relative; width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; position: relative; max-width: 100%; overflow: hidden; padding: 0px; box-sizing: border-box; } .lbWizardSlideInner { display: none; position: absolute; top: 5px; right: 5px; bottom: 0px; left: 5px; box-sizing: border-box; } .lbWizardSlideContent { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%; height: 100%; } .lbWizardSlideHeader { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; padding: 50px 40px 20px 40px; box-sizing: border-box; } .lbWizardSlideTitle { font-size: 1.4em; text-align: center; font-family: 'Mulish_regular', sans-serif; color: var(--color-3) !important; } .lbWizardSlideTitleBig { font-size: 2em; } .lbWizardSlideDescription { font-size: 0.95em; line-height: 1.4em; margin-top: 10px; opacity: 0.6; max-width: 800px; text-align: center; } .lbWizardSlideBody { display: flex; align-items: center; justify-content: center; position: relative; height: 100%; width: 100%; padding: 10px; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; } .lbWizardSlideBodyInner { } .lbWizardSlideBody::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; } .lbWizardSlideBody::-webkit-scrollbar-thumb { border-radius: 7px; background-color: #d0d2d5; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); border: 3px transparent solid; background-clip: padding-box; display: none; } .lbWizardSlideBody:hover::-webkit-scrollbar-thumb { display: block; } .lbWizardSlideIframe, .lbWizardSlideIframe iframe { width: 100%; height: 100%; margin: unset; } .lbWizardSlideIframe { position: relative; } .lbWizardSlideIframe iframe { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: unset; height: unset; width: 100%; height: 100%; border: 0px; outline: unset; } .lbWizardSlideShow { visibility: visible; opacity: 1; transform: scale(1); } .lbWizardSlideShow .lbWizardSlideInner { display: block; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow) { transform: unset; visibility: visible; opacity: 0.8; z-index: 2; -moz-transition: all 300ms; -webkit-transition: all 300ms; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow):hover { opacity: 1; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow) .lbWizardCarouselItemBody { transform: scale(0.4); position: absolute; width: 65%; opacity: 1; z-index: 1; box-sizing: border-box; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow) .lbWizardCarouselItemBody:before { content: ''; position: absolute; top: -20px; right: 20px; bottom: -20px; left: 20px; cursor: pointer; z-index: 3; border: 5px dashed transparent; border-radius: 10px; -moz-transition: all 500ms; -webkit-transition: all 500ms; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow) .lbWizardCarouselItemBody:hover:before { border-color: rgba(0,0,0,0.1); } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow).lbWizardCarouselItemLeft .lbWizardCarouselItemBody { right: -45%; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow).lbWizardCarouselItemRight .lbWizardCarouselItemBody { left: -45%; } .lbWizardSlidesButtons { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; padding: 20px; } .lbWizardSlidesButton { visibility: visible; opacity: 1; background-color: var(--color-1); padding: 9px 20px; border-radius: 25px; font-size: 1em; color: #fff; cursor: pointer; min-width: 100px; box-sizing: border-box; text-align: center; outline: unset !important; border: 0px; } .lbWizardSlidesButtonPrev { background-color: #fff; color: unset; border: 1px solid rgba(0,0,0,0.1); } .lbWizardSlidesButtonFinish { display: none; background-color: var(--color-2); } .lbWizardSlideFooter { width: 100%; text-align: center; box-sizing: border-box; } .lbWizardSlideLopd { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin: 20px; } .lbWizardSlideLopdText { font-size: 0.9em; margin-left: 10px; color: rgba(0,0,0,0.7); text-align: left; } .lbWizardAlert { visibility: hidden; opacity: 0; top: -50px; margin: 0px 0px 0 0px; position: absolute; right: 0px; left: 0px; z-index: 3; padding: 15px; border-radius: 0; border: 1px solid rgba(0,0,0,0.05); -moz-transition: all 500ms; -webkit-transition: all 500ms; } .lbWizardAlertMessage { text-align: center; font-size: 0.9em; } .lbWizardAlertError { background-color: var(--color-2); color: #fff; } .lbWizardAlertShow { visibility: visible; opacity: 1; top: 0; } .lbWizardPopup { visibility: hidden; opacity: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 5; padding: 0px; box-sizing: border-box; -moz-transition: all 300ms; -webkit-transition: all 300ms; background-color: rgba(0,0,0,0.05); } .lbWizardPopupContent { width: 100%; height: 100%; background-color: #ffffff; border-radius: 8px; box-sizing: border-box; overflow: hidden; position: relative; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 0 10px 5px rgb(0 0 0 / 4%); } .lbWizardPopupHeader { position: relative; } .lbWizardPopupClose { position: absolute; top: 15px; right: 15px; z-index: 2; cursor: pointer; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .lbWizardPopupClose:before { content: "\ec8d"; font-size: 1.5em; } .lbWizardPopupBody { height: 100%; } .lbWizardPopupIframe { height: 100%; } .lbWizardPopupIframe iframe { width: 100%; height: 100%; } .lbWizardPopupShow.lbWizardPopup { visibility: visible; opacity: 1; } .lbWizardCarousel { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 100%; width: 100%; } .lbWizardCarouselInner { width: 100%; height: 100%; overflow: hidden; } .lbWizardCarouselItems { width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; -moz-transition: all 500ms; -webkit-transition: all 500ms; } .lbWizardCarouselItems:hover { filter: grayscale(0) !important; opacity: 1 !important; } .lbWizardCarouselItem { visibility: hidden; opacity: 0; transform: scale(0.7); display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; -moz-transition: all 100ms; -webkit-transition: all 100ms; } .lbWizardCarouselItemBody { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%; height: 100%; justify-content: center; } .lbWizardCarouselItemBody iframe { width: 100%; border: 0px; background-color: transparent; height: 100%; margin: unset; } .lbWizardCarouselItemFooter { } .lbWizardCarouselItemFooterTitle { padding: 0px; font-size: 0.75em; color: rgba(0,0,0,0.5); } .lbWizardCarouselLeft { padding: 0 10px 0 0; } .lbWizardCarouselRight { padding: 0 0 0 10px; } .lbWizardCarouselButton { width: 25px ; height: 25px; opacity: 0.4; cursor: pointer; } .lbWizardCarouselButton:hover { transform: scale(1.1); opacity: 0.7; } .lbWizardCarouselButtonPrev { } .lbWizardCarouselButtonNext { } .lbWizardCarouselButtonDisabled, .lbWizardCarouselButtonDisabled:hover { opacity: 0.1; cursor: default; transform: unset; } .lbWizardCarouselItemShow { visibility: visible; opacity: 1; transform: scale(1); } .lbWizardCarouselItemShow .lbWizardCarouselItemBody { max-width: 380px; } .lbWizardCarouselDisabled .lbWizardCarouselItems { filter: grayscale(1); opacity: 0.5; } .lbWizardElementDisabled { cursor: default; pointer-events: none; filter: grayscale(1); opacity: 0.6; } .lbWizardCarouselGrid { display: inline-grid; grid-column-gap: 0px; grid-row-gap: 0px; width: 100%; height: 100%; max-width: 350px; align-items: center; justify-items: center; } .lbWizardCarouselGridItem { display: flex; justify-content: center; align-items: center; margin: 0px; cursor: pointer; box-sizing: border-box; border: 3px solid transparent; border-radius: 8px; width: 100%; height: 100%; position: relative; } .lbWizardCarouselGridItem:hover { transform: scale(1.1); } .lbWizardCarouselGridItemSelected { border-color: var(--color-1); transform: unset !important; cursor: default; } .lbWizardSteps { display: none; visibility: hidden; opacity: 0; width: 35%; max-width: 300px; padding-top: 50px; z-index: 2; } .lbWizardStep { display: flex; flex-direction: row; flex-wrap: nowrap; height: 110px; border-left: 2px dotted #C8C8C8; } .lbWizardStep:last-child { border-left-color: transparent; } .lbWizardStepProgress { padding-right: 20px; position: relative; } .lbWizardStepProgressNumber { width: 35px; height: 35px; background-color: #C8C8C8; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1em; margin-left: -19px; } .lbWizardStepInfo { padding-right: 15px; } .lbWizardStepTitle { font-size: 1.1em; margin-bottom: 3px; color: rgba(0,0,0,0.6); opacity: 0.5; color: var(--color-3) !important; } .lbWizardStepDescription { font-size: 0.8em; line-height: 1.4em; color: rgba(0,0,0,0.6); opacity: 0.5; } .lbWizardStepReady { border-left: 2px solid var(--color-1); cursor: pointer; } .lbWizardStepReady .lbWizardStepProgressNumber { background-color: var(--color-1); } .lbWizardStepCurrent .lbWizardStepProgressNumber { background-color: #9b9b9b; } .lbWizardStepCurrent .lbWizardStepProgress::after { content: ''; position: absolute; top: 9px; left: -35px; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 8px; border-color: transparent transparent transparent var(--color-1); } .lbWizardStepReady .lbWizardStepTitle, .lbWizardStepCurrent .lbWizardStepTitle { color: unset; opacity: 1; } .lbWizardStepReady .lbWizardStepDescription, .lbWizardStepCurrent .lbWizardStepDescription { opacity: 1; } .lbWizardStepsShow .lbWizardInner { width: 100%; } .lbWizardStepsShow .lbWizardSteps { display: block; visibility: visible; opacity: 1; } .lbWizardStepsShow .lbWizardSlideInner { right: 35px; } .lbWizardLoading { visibility: hidden; opacity: 0; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(255,255,255,0.7); z-index: 4; } .lbWizardLoadingIcon { background-image: url(../images/loading.gif); background-repeat: no-repeat; background-position: center; width: 50px; height: 50px; } .lbWizardLoadingMessage { color: rgba(0,0,0,0.8); margin-top: 10px; font-size: 0.9em; } .lbWizardLoadingShow { visibility: visible; opacity: 1; } @media (max-width: 650px) { body { padding: 0px; } .lbWizard { padding: 0px; } .lbWizardFit { padding: 0px; } .lbWizardSteps { display: none !important; } .lbWizardInner { } .lbWizardPopupClose { top: 10px; right: 10px; } .lbWizardContent { border-radius: unset; height: 100% !important; border: unset; min-height: 100%; box-shadow: unset; } .lbWizardSlide { display: block; padding: 0px; } .lbWizardSlidesInner { } .lbWizardSlideHeader { padding: 20px; } .lbWizardSlideBody { padding: 0 20px; } .lbWizardSlideTitleBig { font-size: 1.3em; } .lbWizardSlideInner { top: 0px !important; right: 0px !important; bottom: 0px !important; left: 0px !important; } .lbWizardSlidesButtons { padding: 20px 20px 10px 20px; } .lbWizardSlidesButton { margin: 0 0 5px 0 !important; } .lbWizardCarouselButtonPrev { } .lbWizardCarouselButtonNext { } .lbWizardCarouselLeft { padding: 0 5px 0 0; } .lbWizardCarouselRight { padding: 0 0 0 5px; } .lbWizardCarouselGridItem { margin: 0px; } .lbWizardSlideThumbs .lbWizardCarouselItem:not(.lbWizardCarouselItemShow) .lbWizardCarouselItemBody { display: none !important; } .lbWizardSlideInvitation .lbWizardCarouselItemShow .lbWizardCarouselItemBody { border: unset !important; } .lbWizardPopup { padding: 0px; } .lbWizardFormInputs { flex-wrap: nowrap; align-items: center; } .lbWizardAlert { border-radius: 0px; } }.lbWizardIntro { height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; } .lbWizardSlideIntro { text-align: center; } .lbWizardSlideIntro .lbWizardIntroLogo { margin-bottom: 60px; } .lbWizardSlideIntro .lbWizardIntroLogo img { max-width: 200px; max-height: 80px; } .lbWizardSlideIntro .lbWizardIntroImage, .lbWizardSlideIntro .lbWizardIntroVideo { margin-bottom: 50px; } .lbWizardSlideIntro .lbWizardIntroImage img { max-width: 100%; max-height: 300px; } .lbWizardSlideIntro .lbWizardIntroVideo { height: 450px; max-width: 100%; max-height: 100%; border-radius: 8px; overflow: hidden; } .lbWizardSlideIntro .lbWizardIntroVideo video { width: 100%; height: 100%; object-fit: cover; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 1.8em; margin-bottom: 15px; color: var(--color-3) !important; } .lbWizardSlideIntro .lbWizardIntroDescription { color: rgba(0,0,0,0.7); } .lbWizardSlideIntro .lbWizardIntroContent { margin-top: 15px; color: rgba(0, 0, 0, 0.7); font-size: 0.9em; } .lbWizardSlideIntro .lbWizardIntroContent ul { text-align: left; list-style-type: none; padding: 0; } .lbWizardSlideIntro .lbWizardIntroContent li { margin: 12px 0; position: relative; padding-left: 25px; } .lbWizardSlideIntro .lbWizardIntroContent li::before { content: "✔"; color: #5d6595; position: absolute; left: 0; top: 0; font-size: 1.5em; line-height: 0.8em; } .lbWizardSlideIntro .lbWizardIntroContent li span { font-weight: bold; color: rgba(0, 0, 0, 0.8); } .lbWizardSlideIntro .lbWizardIntroButton { background-color: var(--color-1); padding: 10px 30px; display: inline-block; margin-top: 30px; color: #fff; border-radius: 25px; cursor: pointer; border: 0px; outline: unset; font-size: 1.1em; -moz-transition: all 300ms; -webkit-transition: all 300ms; } @media (max-width: 650px) { .lbWizardSlideIntro .lbWizardIntroImage { margin-bottom: 20px; } .lbWizardSlideIntro .lbWizardIntroTitle { font-size: 1.3em; } }.lbWizardSlideInvitation .lbWizardCarouselItemShow .lbWizardCarouselItemBody { border: 3px solid var(--color-1); border-radius: 6px; max-width: 370px; }.lbWizardSlidePallete .lbWizardCarouselGrid { grid-template-columns: repeat(4, 1fr); max-width: 300px; max-height: 300px; } .lbWizardSlidePallete .lbWizardCarouselGridItemArea { width: 100%; height: 100%; border-radius: 50%; max-width: 50px; max-height: 50px; } .lbWizardCarouselColorCustom { display: inline-flex; margin: 20px 0; width: 100%; max-width: 200px; justify-content: center; flex-direction: row; flex-wrap: nowrap; } .lbWizardCarouselColorCustom .lbWizardFormInputField { max-width: 200px; } .lbWizardCarouselColorCustom .lbWizardFormInputLabel { padding-left: 40px; } .lbWizardCarouselColorCustomPrev { width: 25px; height: 25px; min-width: 25px; margin-left: 8px; border-radius: 50%; background-color: #f1f1f1; } @media (max-width: 650px) { .lbWizardSlidePallete .lbWizardCarouselGridItemArea { max-width: 50px; max-height: 50px; } }.lbWizardSlideOperator .lbWizardCarouselGrid { grid-template-columns: repeat(3, 1fr); max-width: 350px; max-height: 350px; } .lbWizardSlideOperator .lbWizardCarouselGridItemArea { display: flex; align-items: center; justify-content: center; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; overflow-x: hidden; text-align: center; } .lbWizardSlideOperator .lbWizardCarouselGridItemArea img { max-width: 90%; max-height: 90%; } .lbWizardCarouselGridItemInfo { position: absolute; bottom: 0px; background-color: #222222; color: #fff; font-size: 0.7em; margin: 5px; left: 0px; right: 0px; text-align: center; padding: 4px; border-radius: 20px; } .lbWizardCarouselGridItemTitle { font-weight: bold; } .lbWizardCarouselGridItemSubtitle { font-size: 0.9em; opacity: 0.5; } .lbWizardCarouselGridItemPhoto { margin: 8px; } .lbWizardCarouselGridItemPhoto .lbWizardCarouselGridItemArea { top: 10px; right: 10px; bottom: 10px; left: 10px; } .lbWizardSlideOperator .lbWizardCarouselGridItemSelected { cursor: pointer !important; } .lbWizardOperatorInfo { display: flex; flex-direction: row; flex-wrap: nowrap; } .lbWizardOperatorAvatar { margin-right: 20px; } .lbWizardOperatorAvatarImg { max-width: 100px; max-height: 120px; border-radius: 5px; background-repeat: no-repeat; background-position: center; background-size: contain; margin-right: 15px; } .lbWizardCarouselAvatarCustom { display: inline-flex; margin: 20px 0; flex-direction: row; flex-wrap: nowrap; justify-content: center; } .lbWizardCarouselAvatarCustom .lbWizardFormInputField { max-width: 300px; height: 70px; border: 2px dashed rgba(0,0,0,0.1); width: 100%; } .lbWizardCarouselAvatarCustom .lbWizardFormInputLabel { left: 70px; right: 0px; width: unset; } .lbWizardCarouselAvatarCustomAvatar { visibility: hidden; opacity: 1; width: 50px; height: 50px; background-size: cover; background-repeat: no-repeat; background-position: center; margin: 8px; min-width: 50px; border-radius: 3px; -moz-transition: all 300ms; -webkit-transition: all 300ms; cursor: pointer; } .lbWizardCarouselAvatarCustomAvatar:hover { transform: scale(1.1); } .lbWizardCarouselAvatarCustomAvatarShow { visibility: visible; opacity: 1; } .lbWizardOperatorPopup .lbWizardPopupContent { width: 600px; height: 500px; } @media (max-width: 650px) { .lbWizardSlideOperator .lbWizardCarouselGridItemArea { width: 90%; height: 80px; } .lbWizardCarouselAvatarCustom .lbWizardFormInputField { height: 50px; } .lbWizardOperatorInfo { flex-direction: column; flex-wrap: nowrap; align-items: center; } .lbWizardOperatorAvatar { margin: 0 0 25px 0; } .lbWizardOperatorAvatarImg { margin: 0px; } .lbWizardOperatorPopup .lbWizardPopupContent { width: 100%; height: 100%; } }:root { --color-assistance-back: #5777BA; } .lbWizardAssitance { max-width: 300px; padding: 10px; border-radius: 3px; color: #fff; } .lbWizardAssitanceMessage { padding: 10px; border-radius: 0 10px 10px 10px; background-color: var(--color-assistance-back); position: relative; } .lbWizardAssitanceMessageText { font-size: 1em; line-height: 1.3em; text-align: left; border: 0px; outline: unset; padding: 10px; border: 2px dashed transparent; -moz-transition: all 300ms; -webkit-transition: all 300ms; } .lbWizardAssitanceMessage:after { content: ''; position: absolute; top: 0px; left: -15px; width: 0; height: 0; border-style: solid; border-width: 0 15px 15px 0; border-color: transparent var(--color-assistance-back) transparent transparent; } .lbWizardAssitance:hover .lbWizardAssitanceMessageText, .lbWizardAssitanceMessageText:focus { border-color: rgba(255,255,255,0.5); font-style: italic; }.lbWizardSlideSignup .lbWizardSlideHeader { padding-top: 60px; } .lbWizardSignupFinish { position: absolute; top: 0px; overflow: auto; bottom: 0px; left: 0px; right: 0px; padding: 0 30px; } .lbWizardSignupFinishHeader { padding: 50px; text-align: center; } .lbWizardSignupFinishTitle { font-size: 2em; font-family: 'Mulish_regular', sans-serif; } .lbWizardSignupFinishDescription { margin-top: 30px; line-height: 1.4em; color: rgba(0,0,0,0.8); } .lbWizardSignupFinishBody { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; box-sizing: border-box; } .lbWizardSignupFinishScript { display: flex; flex-direction: column; justify-content: center; align-items: center; } .lbWizardSignupFinishScriptInner { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; } .lbWizardSignupFinishScriptImage { margin-right: 40px; } .lbWizardSignupFinishScriptCode { background-color: #F6F6F6; box-sizing: border-box; font-size: 0.9em; position: relative; width: 100%; } .lbWizardSignupFinishScriptCodeHTML { width: 100%; box-sizing: border-box; height: 200px; font-family: monospace; background-color: transparent; resize: none; border: 0px; outline: none; padding: 20px; font-size: 0.8em; color: #2f4778; line-height: 1.2em; } .lbWizardSignupFinishScriptClipboard { display: none; position: absolute; right: 10px; bottom: 10px; font-size: 0.85em; color: rgba(0,0,0,0.8); background-color: #fde78f; padding: 2px 8px; border-radius: 3px; } .lbWizardSignupFinishScriptDescription { margin-top: 30px; font-size: 0.9em; color: rgba(0,0,0,0.8); } .lbWizardSignupFinishFooter { padding: 40px; text-align: center; } .lbWizardSignupFinishButton { background-color: var(--color-1); padding: 10px 30px; display: inline-block; color: #fff; border-radius: 25px; cursor: pointer; border: 0px; outline: unset; font-size: 1.1em; } .lbWizardSignupFinishButtonPanelAccess { background-color: var(--color-2); } @media (max-width: 650px) { .lbWizardSignupFinishHeader { padding: 20px; } .lbWizardSignupFinishTitle { font-size: 1.8em; line-height: 1.3em; } .lbWizardSignupFinishDescription { font-size: 1em; line-height: 1.3em; margin-top: 20px; } .lbWizardSignupFinishScriptInner { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; } .lbWizardSignupFinishScriptImage { margin: 0 0 30px 0; } .lbWizardSignupFinishScriptCode { border-radius: 10px; } .lbWizardSignupFinishScriptCodeHTML { padding: 10px; height: 150px; } .lbWizardSignupFinishScriptDescription { margin: 20px 20px 0 20px; text-align: center; } }.lbWizardSlideShowIntro .lbWizardSlidesButtons { display: none; } .lbWizardSlidePreview .lbWizardSlideBody { padding: 0 20px; } .lbWizardSlideShowSignup .lbWizardSlidesButtonNext { display: none; } .lbWizardSlideShowSignup .lbWizardSlidesButtonFinish { display: block; visibility: visible; opacity: 1; }