/* Starter CSS for FormBold Forms Version: 1.1 URL: https://formbold.com */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ""; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. */ html { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font family by default. 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { display: none; } * { scrollbar-color: initial; scrollbar-width: initial; } *, ::before, ::after { --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: rgb(59 130 246 / 0.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: rgb(59 130 246 / 0.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: ; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .static { position: static; } .absolute { position: absolute; } .relative { position: relative; } .left-0 { left: 0px; } .top-0 { top: 0px; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-2 { margin-bottom: 0.5rem; } .mb-2\.5 { margin-bottom: 0.625rem; } .mb-4 { margin-bottom: 1rem; } .mr-2 { margin-right: 0.5rem; } .mr-2\.5 { margin-right: 0.625rem; } .mt-0 { margin-top: 0px; } .mt-0\.5 { margin-top: 0.125rem; } .mt-8 { margin-top: 32px; } .py-1, .pt-1 { padding-top: 4px; } .py-2, .pt-2 { padding-top: 8px; } .py-3, .pt-3 { padding-top: 12px; } .py-4, .pt-4 { padding-top: 16px; } .py-5, .pt-5 { padding-top: 20px; } .py-6, .pt-6 { padding-top: 24px; } .py-7, .pt-7 { padding-top: 28px; } .py-8, .pt-8 { padding-top: 32px; } .py-9, .pt-9 { padding-top: 36px; } .py-10, .pt-10 { padding-top: 40px; } .py-1, .pb-1 { padding-bottom: 4px; } .py-2, .pb-2 { padding-bottom: 8px; } .py-3, .pb-3 { padding-bottom: 12px; } .py-4, .pb-4 { padding-bottom: 16px; } .py-5, .pb-5 { padding-bottom: 20px; } .py-6, .pb-6 { padding-bottom: 24px; } .py-7, .pb-7 { padding-bottom: 28px; } .py-8, .pb-8 { padding-bottom: 32px; } .py-9, .pb-9 { padding-bottom: 36px; } .py-10, .pb-10 { padding-bottom: 40px; } .px-1, .pl-1 { padding-left: 4px; } .px-2, .pl-2 { padding-left: 0.5rem; } .px-3, .pl-3 { padding-left: 12px; } .px-4, .pl-4 { padding-left: 16px; } .px-5, .pl-5 { padding-left: 20px; } .px-6, .pl-6 { padding-left: 24px; } .px-7, .pl-7 { padding-left: 28px; } .px-8, .pl-8 { padding-left: 32px; } .px-9, .pl-9 { padding-left: 36px; } .px-10, .pl-10 { padding-left: 40px; } .px-1, .pr-1 { padding-right: 4px; } .px-2, .pr-2 { padding-right: 8px; } .px-3, .pr-3 { padding-right: 12px; } .px-4, .pr-4 { padding-right: 16px; } .px-5, .pr-5 { padding-right: 20px; } .px-6, .pr-6 { padding-right: 24px; } .px-7, .pr-7 { padding-right: 28px; } .px-8, .pr-8 { padding-right: 32px; } .px-9, .pr-9 { padding-right: 36px; } .px-10, .pr-10 { padding-right: 40px; } .block { display: block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .h-\[18px\] { height: 18px; } .h-\[190px\] { height: 190px; } .h-\[250px\] { height: 250px; } .h-\[46px\] { height: 46px; } .h-full { height: 100%; } .\!w-full { width: 100% !important; } .w-\[18px\] { width: 18px; } .w-\[46px\] { width: 46px; } .w-full { width: 100%; } .max-w-\[570px\] { max-width: 570px; } .cursor-pointer { cursor: pointer; } .items-center { align-items: center; } .justify-center { justify-content: center; } .space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); } .rounded { border-radius: 0.25rem; } .rounded-\[10px\] { border-radius: 10px; } .rounded-full { border-radius: 9999px; } .border { border-width: 1px; } .border-4 { border-width: 4px; } .border-dashed { border-style: dashed; } .border-\[\#CAD0D9\] { --tw-border-opacity: 1; border-color: rgb(202 208 217 / var(--tw-border-opacity)); } .border-primary { --tw-border-opacity: 1; border-color: rgba(var(--primary), var(--tw-border-opacity)); } .border-stroke { --tw-border-opacity: 1; border-color: rgb(221 227 236 / var(--tw-border-opacity)); } .bg-\[\#F3F3FE\] { --tw-bg-opacity: 1; background-color: rgb(243 243 254 / var(--tw-bg-opacity)); } .bg-primary { --tw-bg-opacity: 1; background-color: rgba(var(--primary), var(--tw-bg-opacity)); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .text-red-400 { color: red; } .p-10 { padding: 2.5rem; } .p-3 { padding: 0.75rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .text-center { text-align: center; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .leading-tight { line-height: 1.25; } .text-black { --tw-text-opacity: 1; color: rgba(var(--black), var(--tw-text-opacity)); } .text-body-color { --tw-text-opacity: 1; color: rgb(99 110 114 / var(--tw-text-opacity)); } .text-primary { --tw-text-opacity: 1; color: rgba(var(--primary), var(--tw-text-opacity)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .opacity-0 { opacity: 0; } .outline-none { outline: 2px solid transparent; outline-offset: 2px; } .outline { outline-style: solid; } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .form-group { margin-bottom: 1rem; } .control-label { margin-bottom: 0.625rem; display: block; font-size: 1rem; line-height: 1.5rem; --tw-text-opacity: 1; color: rgba(var(--black), var(--tw-text-opacity)); } .fb-builder-checkbox:checked ~ label > span { --tw-border-opacity: 1; border-color: rgba(var(--primary), var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgba(var(--primary), var(--tw-bg-opacity)); } .fb-builder-checkbox:checked ~ label > span > span { opacity: 1; } .fb-builder-radio:checked ~ label > span { --tw-border-opacity: 1; border-color: rgba(var(--primary), var(--tw-border-opacity)); } .fb-builder-radio:checked ~ label > span > span { opacity: 1; } input[type="checkbox"]:checked ~ span { --tw-bg-opacity: 1; background-color: rgba(var(--primary), var(--tw-bg-opacity)); } input[type="checkbox"]:checked ~ span span { background-color: transparent; opacity: 1; } .make-public:checked ~ label .slider { --tw-bg-opacity: 1 !important; background-color: rgba(var(--primary), var(--tw-bg-opacity)) !important; } .make-public:checked ~ label .slider .dot { --tw-translate-x: 23px; 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)); } .react-tel-input .flag-dropdown { background-color: transparent !important; } .react-tel-input .selected-flag { height: 100% !important; width: 42px !important; } :root { --primary: 106, 100, 241; --black: 7, 7, 77; } .formbold-builder-preview.themeOne, .formbold-builder-form.themeOne { --primary: 106, 100, 241; --black: 7, 7, 77; } .formbold-builder-preview.themeTwo, .formbold-builder-form.themeTwo { --primary: 225, 87, 138; --black: 20, 6, 8; } .formbold-builder-preview.themeThree, .formbold-builder-form.themeThree { --primary: 57, 163, 136; --black: 6, 21, 17; } .file\:mr-4::file-selector-button { margin-right: 1rem; } .file\:rounded::file-selector-button { border-radius: 0.25rem; } .file\:border-\[\.5px\]::file-selector-button { border-width: 0.5px; } .file\:border-stroke::file-selector-button { --tw-border-opacity: 1; border-color: rgb(221 227 236 / var(--tw-border-opacity)); } .file\:bg-\[\#EEEEEE\]::file-selector-button { --tw-bg-opacity: 1; background-color: rgb(238 238 238 / var(--tw-bg-opacity)); } .file\:px-\[10px\]::file-selector-button { padding-left: 10px; padding-right: 10px; } .file\:py-1::file-selector-button { padding-top: 0.25rem; padding-bottom: 0.25rem; } .file\:text-sm::file-selector-button { font-size: 0.875rem; line-height: 1.25rem; } .file\:font-medium::file-selector-button { font-weight: 500; } .last\:mb-0:last-child { margin-bottom: 0px; } .focus\:border-primary:focus { --tw-border-opacity: 1; border-color: rgba(var(--primary), var(--tw-border-opacity)); } .file\:focus\:border-primary:focus::file-selector-button { --tw-border-opacity: 1; border-color: rgba(var(--primary), var(--tw-border-opacity)); } .disabled\:cursor-default:disabled { cursor: default; } .disabled\:bg-\[\#F5F7FD\]:disabled { --tw-bg-opacity: 1; background-color: rgb(245 247 253 / var(--tw-bg-opacity)); } .hover\:bg-opacity-90:hover { --tw-bg-opacity: 0.9; } .active\:border-primary:active { --tw-border-opacity: 1; border-color: rgba(var(--primary), var(--tw-border-opacity)); } @media (min-width: 540px) { .sm\:text-\[28px\] { font-size: 28px; } } .rating-container, .react-star-rating__root { vertical-align: middle; display: inline-block; } .rating-container .rating-stars:before, .rating-container:before { content: attr(data-content); } .react-star-rating__star { width: 25px; } .react-star-rating__star #star-flat { fill: #c6c6c6; } .react-star-rating__star #star-flat:hover { fill: #ffa91b; } .react-star-rating__root { font-size: 2em; } .react-star-rating__root.rating-editing:hover { cursor: pointer; } .rating-container { position: relative; color: #e3e3e3; overflow: hidden; } .rating-container .rating-stars { position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; color: #f5a71b; transition: all 0.01s; -webkit-mask-image: -webkit-gradient( linear, left top, left bottom, from(#fdbd47), to(#f5a71b) ); } .react-rating-caption { font-size: 1.25em; vertical-align: middle; margin-right: 0.5em; } .rating-disabled .rating-container:hover { cursor: not-allowed; } .react-star-rating__size--sm { font-size: 1em; } .react-star-rating__size--md { font-size: 2em; } .react-star-rating__size--lg { font-size: 2.5em; } /** * React Select * ============ * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/ * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs * MIT License: https://github.com/keystonejs/react-select */ .Select { position: relative; } .Select-control { position: relative; overflow: hidden; background-color: #ffffff; border: 1px solid #cccccc; border-color: #d9d9d9 #cccccc #b3b3b3; border-radius: 4px; box-sizing: border-box; color: #333333; cursor: default; outline: none; padding: 8px 52px 8px 10px; transition: all 200ms ease; } .Select-control:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .is-searchable.is-open > .Select-control { cursor: text; } .is-open > .Select-control { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: #ffffff; border-color: #b3b3b3 #cccccc #d9d9d9; } .is-open > .Select-control > .Select-arrow { border-color: transparent transparent #999999; border-width: 0 5px 5px; } .is-searchable.is-focused:not(.is-open) > .Select-control { cursor: text; } .is-focused:not(.is-open) > .Select-control { border-color: #0088cc #0099e6 #0099e6; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px rgba(0, 136, 204, 0.5); } .Select-placeholder { color: #aaaaaa; padding: 8px 52px 8px 10px; position: absolute; top: 0; left: 0; right: -15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .has-value > .Select-control > .Select-placeholder { color: #333333; } .Select-input > input { cursor: default; background: none transparent; box-shadow: none; height: auto; border: 0 none; font-family: inherit; font-size: inherit; margin: 0; padding: 0; outline: none; display: inline-block; -webkit-appearance: none; } .is-focused .Select-input > input { cursor: text; } .Select-control:not(.is-searchable) > .Select-input { outline: none; } .Select-loading { animation: Select-animation-spin 400ms infinite linear; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid #cccccc; border-right-color: #333333; display: inline-block; position: relative; margin-top: -8px; position: absolute; right: 30px; top: 50%; } .has-value > .Select-control > .Select-loading { right: 46px; } .Select-clear { color: #999999; cursor: pointer; display: inline-block; font-size: 16px; padding: 6px 10px; position: absolute; right: 17px; top: 0; } .Select-clear:hover { color: #c0392b; } .Select-clear > span { font-size: 1.1em; } .Select-arrow-zone { content: " "; display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 30px; cursor: pointer; } .Select-arrow { border-color: #999999 transparent transparent; border-style: solid; border-width: 5px 5px 0; content: " "; display: block; height: 0; margin-top: -ceil(2.5px); position: absolute; right: 10px; top: 14px; width: 0; cursor: pointer; } .Select-menu-outer { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: #ffffff; border: 1px solid #cccccc; border-top-color: #e6e6e6; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); box-sizing: border-box; margin-top: -1px; max-height: 200px; position: absolute; top: 100%; width: 100%; z-index: 1000; -webkit-overflow-scrolling: touch; } .Select-menu { max-height: 198px; overflow-y: auto; } .Select-option { box-sizing: border-box; color: #666666; cursor: pointer; display: block; padding: 8px 10px; } .Select-option:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .Select-option.is-focused { background-color: #f2f9fc; color: #333333; } .Select-option.is-disabled { color: #cccccc; cursor: not-allowed; } .Select-noresults { box-sizing: border-box; color: #999999; cursor: default; display: block; padding: 8px 10px; } .Select.is-multi .Select-control { padding: 2px 52px 2px 3px; } .Select.is-multi .Select-input { vertical-align: middle; border: 1px solid transparent; margin: 2px; padding: 3px 0; } .Select-item { background-color: #f2f9fc; border-radius: 2px; border: 1px solid #c9e6f2; color: #0088cc; display: inline-block; font-size: 1em; margin: 2px; } .Select-item-icon, .Select-item-label { display: inline-block; vertical-align: middle; } .Select-item-label { cursor: default; border-bottom-right-radius: 2px; border-top-right-radius: 2px; padding: 3px 5px; } .Select-item-label .Select-item-label__a { color: #0088cc; cursor: pointer; } .Select-item-icon { cursor: pointer; border-bottom-left-radius: 2px; border-top-left-radius: 2px; border-right: 1px solid #c9e6f2; padding: 2px 5px 4px; } .Select-item-icon:hover, .Select-item-icon:focus { background-color: #ddeff7; color: #0077b3; } .Select-item-icon:active { background-color: #c9e6f2; } .Select.is-multi.is-disabled .Select-item { background-color: #f2f2f2; border: 1px solid #d9d9d9; color: #888888; } .Select.is-multi.is-disabled .Select-item-icon { cursor: not-allowed; border-right: 1px solid #d9d9d9; } .Select.is-multi.is-disabled .Select-item-icon:hover, .Select.is-multi.is-disabled .Select-item-icon:focus, .Select.is-multi.is-disabled .Select-item-icon:active { background-color: #f2f2f2; } @keyframes Select-animation-spin { to { transform: rotate(1turn); } } .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before { border-color: #ccc; border-style: solid; border-width: 3px 3px 0 0; content: ""; display: block; height: 9px; position: absolute; top: 6px; width: 9px; } .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle { margin-left: -4px; position: absolute; width: 0; } .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after { box-sizing: content-box; position: absolute; border: 8px solid transparent; height: 0; width: 1px; content: ""; z-index: -1; border-width: 8px; left: -8px; } .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before { border-bottom-color: #aeaeae; } .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle { top: 0; margin-top: -8px; } .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after { border-top: none; border-bottom-color: #f0f0f0; } .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after { top: 0; } .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before { top: -1px; border-bottom-color: #aeaeae; } .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle { bottom: 0; margin-bottom: -8px; } .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after { border-bottom: none; border-top-color: #fff; } .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after { bottom: 0; } .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before { bottom: -1px; border-top-color: #aeaeae; } .react-datepicker-wrapper { display: inline-block; padding: 0; border: 0; width: 100%; } .react-datepicker { font-family: "Helvetica Neue", helvetica, arial, sans-serif; font-size: 0.8rem; background-color: #fff; color: #000; border: 1px solid #aeaeae; border-radius: 0.3rem; display: inline-block; position: relative; } .react-datepicker--time-only .react-datepicker__triangle { left: 35px; } .react-datepicker--time-only .react-datepicker__time-container { border-left: 0; } .react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box { border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .react-datepicker__triangle { position: absolute; left: 50px; } .react-datepicker-popper { z-index: 1; } .react-datepicker-popper[data-placement^="bottom"] { padding-top: 10px; } .react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle, .react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle { left: auto; right: 50px; } .react-datepicker-popper[data-placement^="top"] { padding-bottom: 10px; } .react-datepicker-popper[data-placement^="right"] { padding-left: 8px; } .react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle { left: auto; right: 42px; } .react-datepicker-popper[data-placement^="left"] { padding-right: 8px; } .react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle { left: 42px; right: auto; } .react-datepicker__header { text-align: center; background-color: #f0f0f0; border-bottom: 1px solid #aeaeae; border-top-left-radius: 0.3rem; padding: 8px 0; position: relative; } .react-datepicker__header--time { padding-bottom: 8px; padding-left: 5px; padding-right: 5px; } .react-datepicker__header--time:not(.react-datepicker__header--time--only) { border-top-left-radius: 0; } .react-datepicker__header:not(.react-datepicker__header--has-time-select) { border-top-right-radius: 0.3rem; } .react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select, .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll { display: inline-block; margin: 0 15px; } .react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header { margin-top: 0; color: #000; font-weight: bold; font-size: 0.944rem; } .react-datepicker-time__header { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .react-datepicker__navigation { align-items: center; background: none; display: flex; justify-content: center; text-align: center; cursor: pointer; position: absolute; top: 2px; padding: 0; border: none; z-index: 1; height: 32px; width: 32px; text-indent: -999em; overflow: hidden; } .react-datepicker__navigation--previous { left: 2px; } .react-datepicker__navigation--next { right: 2px; } .react-datepicker__navigation--next--with-time:not( .react-datepicker__navigation--next--with-today-button ) { right: 85px; } .react-datepicker__navigation--years { position: relative; top: 0; display: block; margin-left: auto; margin-right: auto; } .react-datepicker__navigation--years-previous { top: 4px; } .react-datepicker__navigation--years-upcoming { top: -4px; } .react-datepicker__navigation:hover *::before { border-color: #a6a6a6; } .react-datepicker__navigation-icon { position: relative; top: -1px; font-size: 20px; width: 0; } .react-datepicker__navigation-icon--next { left: -2px; } .react-datepicker__navigation-icon--next::before { transform: rotate(45deg); left: -7px; } .react-datepicker__navigation-icon--previous { right: -2px; } .react-datepicker__navigation-icon--previous::before { transform: rotate(225deg); right: -7px; } .react-datepicker__month-container { float: left; } .react-datepicker__year { margin: 0.4rem; text-align: center; } .react-datepicker__year-wrapper { display: flex; flex-wrap: wrap; max-width: 180px; } .react-datepicker__year .react-datepicker__year-text { display: inline-block; width: 4rem; margin: 2px; } .react-datepicker__month { margin: 0.4rem; text-align: center; } .react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text { display: inline-block; width: 4rem; margin: 2px; } .react-datepicker__input-time-container { clear: both; width: 100%; float: left; margin: 5px 0 10px 15px; text-align: left; } .react-datepicker__input-time-container .react-datepicker-time__caption { display: inline-block; } .react-datepicker__input-time-container .react-datepicker-time__input-container { display: inline-block; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input { display: inline-block; margin-left: 10px; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input { width: auto; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button, .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] { -moz-appearance: textfield; } .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter { margin-left: 5px; display: inline-block; } .react-datepicker__time-container { float: right; border-left: 1px solid #aeaeae; width: 85px; } .react-datepicker__time-container--with-today-button { display: inline; border: 1px solid #aeaeae; border-radius: 0.3rem; position: absolute; right: -87px; top: 0; } .react-datepicker__time-container .react-datepicker__time { position: relative; background: white; border-bottom-right-radius: 0.3rem; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { width: 85px; overflow-x: hidden; margin: 0 auto; text-align: center; border-bottom-right-radius: 0.3rem; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list { list-style: none; margin: 0; height: calc(195px + (1.7rem / 2)); overflow-y: scroll; padding-right: 0; padding-left: 0; width: 100%; box-sizing: content-box; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item { height: 30px; padding: 5px 10px; white-space: nowrap; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover { cursor: pointer; background-color: #f0f0f0; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { background-color: #216ba5; color: white; font-weight: bold; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover { background-color: #216ba5; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled { color: #ccc; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover { cursor: default; background-color: transparent; } .react-datepicker__week-number { color: #ccc; display: inline-block; width: 1.7rem; line-height: 1.7rem; text-align: center; margin: 0.166rem; } .react-datepicker__week-number.react-datepicker__week-number--clickable { cursor: pointer; } .react-datepicker__week-number.react-datepicker__week-number--clickable:hover { border-radius: 0.3rem; background-color: #f0f0f0; } .react-datepicker__day-names, .react-datepicker__week { white-space: nowrap; } .react-datepicker__day-names { margin-bottom: -8px; } .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name { color: #000; display: inline-block; width: 1.7rem; line-height: 1.7rem; text-align: center; margin: 0.166rem; } .react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range, .react-datepicker__quarter--selected, .react-datepicker__quarter--in-selecting-range, .react-datepicker__quarter--in-range { border-radius: 0.3rem; background-color: #216ba5; color: #fff; } .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover, .react-datepicker__quarter--selected:hover, .react-datepicker__quarter--in-selecting-range:hover, .react-datepicker__quarter--in-range:hover { background-color: #1d5d90; } .react-datepicker__month--disabled, .react-datepicker__quarter--disabled { color: #ccc; pointer-events: none; } .react-datepicker__month--disabled:hover, .react-datepicker__quarter--disabled:hover { cursor: default; background-color: transparent; } .react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text { cursor: pointer; } .react-datepicker__day:hover, .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover, .react-datepicker__year-text:hover { border-radius: 0.3rem; background-color: #f0f0f0; } .react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today { font-weight: bold; } .react-datepicker__day--highlighted, .react-datepicker__month-text--highlighted, .react-datepicker__quarter-text--highlighted, .react-datepicker__year-text--highlighted { border-radius: 0.3rem; background-color: #3dcc4a; color: #fff; } .react-datepicker__day--highlighted:hover, .react-datepicker__month-text--highlighted:hover, .react-datepicker__quarter-text--highlighted:hover, .react-datepicker__year-text--highlighted:hover { background-color: #32be3f; } .react-datepicker__day--highlighted-custom-1, .react-datepicker__month-text--highlighted-custom-1, .react-datepicker__quarter-text--highlighted-custom-1, .react-datepicker__year-text--highlighted-custom-1 { color: magenta; } .react-datepicker__day--highlighted-custom-2, .react-datepicker__month-text--highlighted-custom-2, .react-datepicker__quarter-text--highlighted-custom-2, .react-datepicker__year-text--highlighted-custom-2 { color: green; } .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range { border-radius: 0.3rem; background-color: #216ba5; color: #fff; } .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover, .react-datepicker__month-text--selected:hover, .react-datepicker__month-text--in-selecting-range:hover, .react-datepicker__month-text--in-range:hover, .react-datepicker__quarter-text--selected:hover, .react-datepicker__quarter-text--in-selecting-range:hover, .react-datepicker__quarter-text--in-range:hover, .react-datepicker__year-text--selected:hover, .react-datepicker__year-text--in-selecting-range:hover, .react-datepicker__year-text--in-range:hover { background-color: #1d5d90; } .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected { border-radius: 0.3rem; background-color: #bad9f1; color: rgb(0, 0, 0); } .react-datepicker__day--keyboard-selected:hover, .react-datepicker__month-text--keyboard-selected:hover, .react-datepicker__quarter-text--keyboard-selected:hover, .react-datepicker__year-text--keyboard-selected:hover { background-color: #1d5d90; } .react-datepicker__day--in-selecting-range:not( .react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range ), .react-datepicker__month-text--in-selecting-range:not( .react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range ), .react-datepicker__quarter-text--in-selecting-range:not( .react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range ), .react-datepicker__year-text--in-selecting-range:not( .react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range ) { background-color: rgba(33, 107, 165, 0.5); } .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not( .react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range ), .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not( .react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range ), .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not( .react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range ), .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not( .react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range ) { background-color: #f0f0f0; color: #000; } .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled { cursor: default; color: #ccc; } .react-datepicker__day--disabled:hover, .react-datepicker__month-text--disabled:hover, .react-datepicker__quarter-text--disabled:hover, .react-datepicker__year-text--disabled:hover { background-color: transparent; } .react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover, .react-datepicker__quarter-text.react-datepicker__month--selected:hover, .react-datepicker__quarter-text.react-datepicker__month--in-range:hover, .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover, .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover { background-color: #216ba5; } .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover { background-color: #f0f0f0; } .react-datepicker__input-container { position: relative; display: inline-block; width: 100%; } .react-datepicker__input-container .react-datepicker__calendar-icon { position: absolute; padding: 0.5rem; } .react-datepicker__view-calendar-icon input { padding: 6px 10px 5px 25px; } .react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view { border: 1px solid transparent; border-radius: 0.3rem; position: relative; } .react-datepicker__year-read-view:hover, .react-datepicker__month-read-view:hover, .react-datepicker__month-year-read-view:hover { cursor: pointer; } .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow { border-top-color: #b3b3b3; } .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow { transform: rotate(135deg); right: -16px; top: 0; } .react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown { background-color: #f0f0f0; position: absolute; width: 50%; left: 25%; top: 30px; z-index: 1; text-align: center; border-radius: 0.3rem; border: 1px solid #aeaeae; } .react-datepicker__year-dropdown:hover, .react-datepicker__month-dropdown:hover, .react-datepicker__month-year-dropdown:hover { cursor: pointer; } .react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable { height: 150px; overflow-y: scroll; } .react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option { line-height: 20px; width: 100%; display: block; margin-left: auto; margin-right: auto; } .react-datepicker__year-option:first-of-type, .react-datepicker__month-option:first-of-type, .react-datepicker__month-year-option:first-of-type { border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; } .react-datepicker__year-option:last-of-type, .react-datepicker__month-option:last-of-type, .react-datepicker__month-year-option:last-of-type { -webkit-user-select: none; -moz-user-select: none; user-select: none; border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .react-datepicker__year-option:hover, .react-datepicker__month-option:hover, .react-datepicker__month-year-option:hover { background-color: #ccc; } .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming { border-bottom-color: #b3b3b3; } .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous { border-top-color: #b3b3b3; } .react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected { position: absolute; left: 15px; } .react-datepicker__close-icon { cursor: pointer; background-color: transparent; border: 0; outline: 0; padding: 0 6px 0 0; position: absolute; top: 0; right: 0; height: 100%; display: table-cell; vertical-align: middle; } .react-datepicker__close-icon::after { cursor: pointer; background-color: #216ba5; color: #fff; border-radius: 50%; height: 16px; width: 16px; padding: 2px; font-size: 12px; line-height: 1; text-align: center; display: table-cell; vertical-align: middle; content: "×"; } .react-datepicker__today-button { background: #f0f0f0; border-top: 1px solid #aeaeae; cursor: pointer; text-align: center; font-weight: bold; padding: 5px 0; clear: left; } .react-datepicker__portal { position: fixed; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); left: 0; top: 0; justify-content: center; align-items: center; display: flex; z-index: 2147483647; } .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name { width: 3rem; line-height: 3rem; } @media (max-width: 400px), (max-height: 550px) { .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name { width: 2rem; line-height: 2rem; } } .react-datepicker__portal .react-datepicker__current-month, .react-datepicker__portal .react-datepicker-time__header { font-size: 1.44rem; } .react-datepicker__children-container { width: 13.8rem; margin: 0.4rem; padding-right: 0.2rem; padding-left: 0.2rem; height: auto; } .react-datepicker__aria-live { position: absolute; -webkit-clip-path: circle(0); clip-path: circle(0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; width: 1px; white-space: nowrap; } .react-datepicker__calendar-icon { width: 1em; height: 1em; vertical-align: -0.125em; } .react-datepicker-popper { z-index: 2000; } .rdw-option-wrapper { border: 1px solid #f1f1f1; padding: 5px; min-width: 25px; height: 20px; border-radius: 2px; margin: 0 4px; display: flex; justify-content: center; align-items: center; cursor: pointer; background: white; text-transform: capitalize; } .rdw-option-wrapper:hover { box-shadow: 1px 1px 0px #bfbdbd; } .rdw-option-wrapper:active { box-shadow: 1px 1px 0px #bfbdbd inset; } .rdw-option-active { box-shadow: 1px 1px 0px #bfbdbd inset; } .rdw-option-wrapper img { width: 13px; } .rdw-option-disabled { opacity: 0.3; cursor: default; } .rdw-dropdown-wrapper { height: 30px; background: white; cursor: pointer; border: 1px solid #f1f1f1; border-radius: 2px; margin: 0 3px; text-transform: capitalize; background: white; } .rdw-dropdown-wrapper:focus { outline: none; } .rdw-dropdown-wrapper:hover { box-shadow: 1px 1px 0px #bfbdbd; background-color: #ffffff; } .rdw-dropdown-wrapper:active { box-shadow: 1px 1px 0px #bfbdbd inset; } .rdw-dropdown-carettoopen { height: 0px; width: 0px; position: absolute; top: 35%; right: 10%; border-top: 6px solid black; border-left: 5px solid transparent; border-right: 5px solid transparent; } .rdw-dropdown-carettoclose { height: 0px; width: 0px; position: absolute; top: 35%; right: 10%; border-bottom: 6px solid black; border-left: 5px solid transparent; border-right: 5px solid transparent; } .rdw-dropdown-selectedtext { display: flex; position: relative; height: 100%; align-items: center; padding: 0 5px; } .rdw-dropdown-optionwrapper { z-index: 100; position: relative; border: 1px solid #f1f1f1; width: 98%; background: white; border-radius: 2px; margin: 0; padding: 0; } .rdw-dropdown-optionwrapper:hover { box-shadow: 1px 1px 0px #bfbdbd; background-color: #ffffff; } .rdw-dropdownoption-default { min-height: 25px; display: flex; align-items: center; padding: 0 5px; } .rdw-dropdownoption-highlighted { background: #f1f1f1; } .rdw-dropdownoption-active { background: #f5f5f5; } .rdw-dropdownoption-disabled { opacity: 0.3; cursor: default; } .rdw-inline-wrapper { display: flex; margin-bottom: 6px; } .rdw-inline-dropdown { width: 50px; } .rdw-inline-dropdownoption { height: 40px; display: flex; justify-content: center; } .rdw-block-wrapper { display: flex; align-items: center; margin-bottom: 6px; } .rdw-block-dropdown { width: 110px; } .rdw-fontsize-wrapper { display: flex; align-items: center; margin-bottom: 6px; } .rdw-fontsize-dropdown { min-width: 40px; } .rdw-fontsize-option { display: flex; justify-content: center; } .rdw-fontfamily-wrapper { display: flex; align-items: center; margin-bottom: 6px; } .rdw-fontfamily-dropdown { width: 115px; } .rdw-fontfamily-placeholder { white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; } .rdw-fontfamily-optionwrapper { width: 140px; } .rdw-list-wrapper { display: flex; align-items: center; margin-bottom: 6px; } .rdw-list-dropdown { width: 50px; z-index: 90; } .rdw-list-dropdownOption { height: 40px; display: flex; justify-content: center; } .rdw-text-align-wrapper { display: flex; align-items: center; margin-bottom: 6px; } .rdw-text-align-dropdown { width: 50px; z-index: 90; } .rdw-text-align-dropdownOption { height: 40px; display: flex; justify-content: center; } .rdw-right-aligned-block { display: flex; flex-direction: row; justify-content: flex-end; } .rdw-left-aligned-block { display: flex; flex-direction: row; justify-content: flex-start; } .rdw-center-aligned-block { display: flex; flex-direction: row; justify-content: center; } .rdw-justify-aligned-block { display: flex; flex-direction: row; } .rdw-colorpicker-wrapper { display: flex; align-items: center; margin-bottom: 6px; position: relative; } .rdw-colorpicker-modal { position: absolute; top: 35px; right: 5px; display: flex; flex-direction: column; width: 200px; height: 200px; border: 1px solid #f1f1f1; padding: 15px; border-radius: 2px; z-index: 100; background: white; box-shadow: 3px 3px 5px #bfbdbd; } .rdw-colorpicker-modal-header { display: flex; padding-bottom: 5px; } .rdw-colorpicker-modal-style-label { font-size: 15px; width: 50%; text-align: center; cursor: pointer; padding: 0 10px 5px; } .rdw-colorpicker-modal-style-label-active { border-bottom: 2px solid #0a66b7; } .rdw-colorpicker-modal-options { margin: 5px auto; display: flex; width: 170px; flex-wrap: wrap; } .rdw-colorpicker-cube { width: 22px; height: 22px; border: 1px solid #f1f1f1; } .rdw-colorpicker-option { margin: 3px; padding: 0; min-height: 20px; border: none; width: 22px; height: 22px; min-width: 22px; box-shadow: 1px 2px 1px #bfbdbd inset; } .rdw-colorpicker-option:hover { box-shadow: 1px 2px 1px #bfbdbd; } .rdw-colorpicker-option:active { box-shadow: -1px -2px 1px #bfbdbd; } .rdw-colorpicker-option-active { box-shadow: 0px 0px 2px 2px #bfbdbd; } .rdw-link-wrapper { display: flex; align-items: center; margin-bottom: 6px; position: relative; } .rdw-link-dropdown { width: 50px; } .rdw-link-dropdownOption { height: 40px; display: flex; justify-content: center; } .rdw-link-dropdownPlaceholder { margin-left: 8px; } .rdw-link-modal { position: absolute; top: 35px; left: 5px; display: flex; flex-direction: column; width: 235px; height: 180px; border: 1px solid #f1f1f1; padding: 15px; border-radius: 2px; z-index: 100; background: white; box-shadow: 3px 3px 5px #bfbdbd; } .rdw-link-modal-label { font-size: 15px; } .rdw-link-modal-input { margin-top: 5px; border-radius: 2px; border: 1px solid #f1f1f1; height: 25px; margin-bottom: 15px; padding: 0 5px; } .rdw-link-modal-input:focus { outline: none; } .rdw-link-modal-buttonsection { margin: 0 auto; } .rdw-link-modal-btn { margin-left: 10px; width: 75px; height: 30px; border: 1px solid #f1f1f1; border-radius: 2px; cursor: pointer; background: white; text-transform: capitalize; } .rdw-link-modal-btn:hover { box-shadow: 1px 1px 0px #bfbdbd; } .rdw-link-modal-btn:active { box-shadow: 1px 1px 0px #bfbdbd inset; } .rdw-link-modal-btn:focus { outline: none !important; } .rdw-link-modal-btn:disabled { background: #ece9e9; } .rdw-link-dropdownoption { height: 40px; display: flex; justify-content: center; } .rdw-history-dropdown { width: 50px; } .rdw-embedded-wrapper { display: flex; align-items: center; margin-bottom: 6px; position: relative; } .rdw-embedded-modal { position: absolute; top: 35px; left: 5px; display: flex; flex-direction: column; width: 235px; height: 180px; border: 1px solid #f1f1f1; padding: 15px; border-radius: 2px; z-index: 100; background: white; justify-content: space-between; box-shadow: 3px 3px 5px #bfbdbd; } .rdw-embedded-modal-header { font-size: 15px; display: flex; } .rdw-embedded-modal-header-option { width: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; flex-direction: column; } .rdw-embedded-modal-header-label { width: 95px; border: 1px solid #f1f1f1; margin-top: 5px; background: #6eb8d4; border-bottom: 2px solid #0a66b7; } .rdw-embedded-modal-link-section { display: flex; flex-direction: column; } .rdw-embedded-modal-link-input { width: 95%; height: 35px; margin: 10px 0; border: 1px solid #f1f1f1; border-radius: 2px; font-size: 15px; padding: 0 5px; } .rdw-embedded-modal-link-input:focus { outline: none; } .rdw-embedded-modal-btn-section { display: flex; justify-content: center; } .rdw-embedded-modal-btn { margin: 0 3px; width: 75px; height: 30px; border: 1px solid #f1f1f1; border-radius: 2px; cursor: pointer; background: white; text-transform: capitalize; } .rdw-embedded-modal-btn:hover { box-shadow: 1px 1px 0px #bfbdbd; } .rdw-embedded-modal-btn:active { box-shadow: 1px 1px 0px #bfbdbd inset; } .rdw-embedded-modal-btn:focus { outline: none !important; } .rdw-embedded-modal-btn:disabled { background: #ece9e9; } .rdw-embedded-modal-size { display: flex; margin: 5px 0 10px; justify-content: space-between; } .rdw-embedded-modal-size-input { width: 45%; height: 20px; border: 1px solid #f1f1f1; border-radius: 2px; font-size: 12px; } .rdw-embedded-modal-size-input:focus { outline: none; } .rdw-emoji-wrapper { display: flex; align-items: center; margin-bottom: 6px; position: relative; } .rdw-emoji-modal { overflow: auto; position: absolute; top: 35px; left: 5px; display: flex; flex-wrap: wrap; width: 235px; height: 180px; border: 1px solid #f1f1f1; padding: 15px; border-radius: 2px; z-index: 100; background: white; box-shadow: 3px 3px 5px #bfbdbd; } .rdw-emoji-icon { margin: 2.5px; height: 24px; width: 24px; cursor: pointer; font-size: 22px; display: flex; justify-content: center; align-items: center; } .rdw-spinner { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; } .rdw-spinner > div { width: 12px; height: 12px; background-color: #333; border-radius: 100%; display: inline-block; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .rdw-spinner .rdw-bounce1 { animation-delay: -0.32s; } .rdw-spinner .rdw-bounce2 { animation-delay: -0.16s; } @keyframes sk-bouncedelay { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .rdw-image-wrapper { display: flex; align-items: center; margin-bottom: 6px; position: relative; } .rdw-image-modal { position: absolute; top: 35px; left: 5px; display: flex; flex-direction: column; width: 235px; height: 200px; border: 1px solid #f1f1f1; padding: 15px; border-radius: 2px; z-index: 100; background: white; box-shadow: 3px 3px 5px #bfbdbd; } .rdw-image-modal-header { font-size: 15px; margin: 10px 0; display: flex; } .rdw-image-modal-header-option { width: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; flex-direction: column; } .rdw-image-modal-header-label { width: 80px; background: #f1f1f1; border: 1px solid #f1f1f1; margin-top: 5px; } .rdw-image-modal-header-label-highlighted { background: #6eb8d4; border-bottom: 2px solid #0a66b7; } .rdw-image-modal-upload-option { height: 65px; width: 100%; color: gray; cursor: pointer; display: flex; border: none; font-size: 15px; align-items: center; justify-content: center; background-color: #f1f1f1; outline: 2px dashed gray; outline-offset: -10px; margin: 10px 0; } .rdw-image-modal-upload-option-highlighted { outline: 2px dashed #0a66b7; } .rdw-image-modal-upload-option-label { cursor: pointer; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .rdw-image-modal-upload-option-input { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .rdw-image-modal-url-section { display: flex; } .rdw-image-modal-url-input { width: 95%; height: 35px; margin: 25px 0 5px; border: 1px solid #f1f1f1; border-radius: 2px; font-size: 15px; padding: 0 5px; } .rdw-image-modal-btn-section { margin: 10px auto 0; } .rdw-image-modal-url-input:focus { outline: none; } .rdw-image-modal-btn { margin: 0 5px; width: 75px; height: 30px; border: 1px solid #f1f1f1; border-radius: 2px; cursor: pointer; background: white; text-transform: capitalize; } .rdw-image-modal-btn:hover { box-shadow: 1px 1px 0px #bfbdbd; } .rdw-image-modal-btn:active { box-shadow: 1px 1px 0px #bfbdbd inset; } .rdw-image-modal-btn:focus { outline: none !important; } .rdw-image-modal-btn:disabled { background: #ece9e9; } .rdw-image-modal-spinner { position: absolute; top: -3px; left: 0; width: 100%; height: 100%; opacity: 0.5; } .rdw-remove-wrapper { display: flex; align-items: center; margin-bottom: 6px; position: relative; } .rdw-history-wrapper { display: flex; align-items: center; margin-bottom: 6px; } .rdw-history-dropdownoption { height: 40px; display: flex; justify-content: center; } .rdw-history-dropdown { width: 50px; } .rdw-link-decorator-wrapper { position: relative; } .rdw-link-decorator-icon { position: absolute; left: 40%; top: 0; cursor: pointer; background-color: white; } .rdw-mention { color: #1236ff; background-color: #f0fbff; padding: 1px 2px; border-radius: 2px; } .rdw-mention-link { text-decoration: none; } .rdw-suggestion-wrapper { position: relative; } .rdw-suggestion-dropdown { position: absolute; display: flex; flex-direction: column; border: 1px solid #f1f1f1; min-width: 100px; max-height: 150px; overflow: auto; background: white; z-index: 100; } .rdw-suggestion-option { padding: 7px 5px; border-bottom: 1px solid #f1f1f1; } .rdw-suggestion-option-active { background-color: #f1f1f1; } .rdw-image-alignment-options-popup { position: absolute; background: white; display: flex; padding: 5px 2px; border-radius: 2px; border: 1px solid #f1f1f1; width: 105px; cursor: pointer; z-index: 100; } .rdw-alignment-option-left { justify-content: flex-start; } .rdw-image-alignment-option { height: 15px; width: 15px; min-width: 15px; } .rdw-image-alignment { position: relative; } .rdw-image-imagewrapper { position: relative; } .rdw-image-center { float: none; display: flex; justify-content: center; } .rdw-image-left { float: left; } .rdw-image-right { float: right; } .rdw-editor-main { height: 150px; width: 100%; overflow: auto; box-sizing: content-box; background: #fff; } .rdw-editor-toolbar { padding: 6px 5px 0; border-radius: 2px; border: 1px solid #f1f1f1; display: flex; justify-content: flex-start; width: 100%; background: white; flex-wrap: wrap; font-size: 15px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .public-DraftStyleDefault-block { margin: 1em 0; } .rdw-editor-wrapper:focus { outline: none; } .DraftEditor-root { padding: 0 10px; } /** * Draft v0.9.1 * * Copyright (c) 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ .DraftEditor-editorContainer, .DraftEditor-root, .public-DraftEditor-content { height: inherit; text-align: initial; } .public-DraftEditor-content[contenteditable="true"] { -webkit-user-modify: read-write-plaintext-only; } .DraftEditor-root { position: relative; } .DraftEditor-editorContainer { background-color: rgba(255, 255, 255, 0); border-left: 0.1px solid transparent; position: relative; z-index: 1; } .public-DraftEditor-block { position: relative; } .DraftEditor-alignLeft .public-DraftStyleDefault-block { text-align: left; } .DraftEditor-alignLeft .public-DraftEditorPlaceholder-root { left: 0; text-align: left; } .DraftEditor-alignCenter .public-DraftStyleDefault-block { text-align: center; } .DraftEditor-alignCenter .public-DraftEditorPlaceholder-root { margin: 0 auto; text-align: center; width: 100%; } .DraftEditor-alignRight .public-DraftStyleDefault-block { text-align: right; } .DraftEditor-alignRight .public-DraftEditorPlaceholder-root { right: 0; text-align: right; } .public-DraftEditorPlaceholder-root { color: #9197a3; position: absolute; z-index: 0; } .public-DraftEditorPlaceholder-hasFocus { color: #bdc1c9; } .DraftEditorPlaceholder-hidden { display: none; } .public-DraftStyleDefault-block { position: relative; white-space: pre-wrap; } .public-DraftStyleDefault-ltr { direction: ltr; text-align: left; } .public-DraftStyleDefault-rtl { direction: rtl; text-align: right; } .public-DraftStyleDefault-listLTR { direction: ltr; } .public-DraftStyleDefault-listRTL { direction: rtl; } .public-DraftStyleDefault-ol, .public-DraftStyleDefault-ul { margin: 16px 0; padding: 0; } .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR { margin-left: 1.5em; } .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL { margin-right: 1.5em; } .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR { margin-left: 3em; } .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL { margin-right: 3em; } .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR { margin-left: 4.5em; } .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL { margin-right: 4.5em; } .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR { margin-left: 6em; } .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL { margin-right: 6em; } .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR { margin-left: 7.5em; } .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL { margin-right: 7.5em; } .public-DraftStyleDefault-unorderedListItem { list-style-type: square; position: relative; } .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0 { list-style-type: disc; } .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1 { list-style-type: circle; } .public-DraftStyleDefault-orderedListItem { list-style-type: none; position: relative; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before { left: -36px; position: absolute; text-align: right; width: 30px; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before { position: absolute; right: -36px; text-align: left; width: 30px; } .public-DraftStyleDefault-orderedListItem:before { content: counter(ol0) ". "; counter-increment: ol0; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before { content: counter(ol1) ". "; counter-increment: ol1; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before { content: counter(ol2) ". "; counter-increment: ol2; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before { content: counter(ol3) ". "; counter-increment: ol3; } .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before { content: counter(ol4) ". "; counter-increment: ol4; } .public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset { counter-reset: ol0; } .public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset { counter-reset: ol1; } .public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset { counter-reset: ol2; } .public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset { counter-reset: ol3; } .public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset { counter-reset: ol4; } .formbold-builder .formbold-builder-preview .preview-page-break { padding: 5px 0; border-top: 2px dotted #ccc; border-bottom: 2px dotted #ccc; background: #eee; text-align: center; width: 100%; font-weight: bold; margin: 5px 0; background: repeating-linear-gradient( 45deg, #fff, #fff 10px, #eee 10px, #eee 20px ); } .formbold-builder .formbold-builder-preview label { font-weight: normal; } .formbold-builder .formbold-builder-preview .bold { font-weight: bold; } .formbold-builder .formbold-builder-preview .italic { font-style: italic; } .formbold-builder .formbold-builder-preview .no-image { background: #eee; width: 100px; height: 100px; border: 1px solid #ddd; text-align: center; padding-top: 35px; } .formbold-builder .formbold-builder-preview .option-inline { display: inline-block !important; margin-right: 10px !important; } .formbold-builder .formbold-builder-preview .form-label { display: block !important; } .formbold-builder .formbold-builder-preview .edit-form { position: fixed; top: 0; right: -1000px; height: 100%; width: 490px; transition: 0.5s; overflow-y: auto; z-index: 9999; background: #f9fbfd; } .formbold-builder .formbold-builder-preview .edit-form .edit-overlay { position: fixed; background: rgba(45, 45, 66, 0.6); width: 100%; height: 100%; top: 0; right: -100%; transition: 0.5s; z-index: -1; } .formbold-builder .formbold-builder-preview .edit-form .dismiss-edit { cursor: pointer; font-size: 125%; } .formbold-builder .formbold-builder-preview .edit-form textarea { width: 100%; } .formbold-builder .formbold-builder-preview .edit-form .form-group .form-group-range label { display: block; } .formbold-builder .formbold-builder-preview .edit-form .form-group .form-group-range input { display: inline-block; width: 21%; margin-left: 0; } .formbold-builder .formbold-builder-preview .edit-form .form-group .form-group-range input:last-of-type { width: 78%; margin-left: 1%; } .formbold-builder .formbold-builder-preview .edit-form .form-group .form-group-range input:first-of-type { width: 21%; margin-left: 0; } .formbold-builder .formbold-builder-preview .Sortable { transition: opacity 0.25s ease-in; position: relative; cursor: move; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item { padding: 10px 20px; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem { position: relative; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem .form-group { pointer-events: none; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem .form-group label, .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem .form-group select, .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem .form-group input, .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem .form-group a { cursor: move; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem .form-group input[type="date"] { height: 42px; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem .form-group .react-star-rating { display: block; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem .form-group .checkbox-label, .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem .form-group .radio-label { font-weight: normal; display: block; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem .form-group .label-required { margin-left: 5px; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.SortableItem.is-dragging { position: absolute; z-index: 1688; border: 2px #ccc dashed; background: #fff; cursor: move; padding: 10px 20px; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item.is-placeholder { display: block; z-index: auto; opacity: 0.4; border: 2px #ccc dashed; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item .toolbar-header { opacity: 0; z-index: 100; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item:hover { background: #fff !important; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item:hover select, .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item:hover input { cursor: move; pointer-events: none; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item:hover .toolbar-header { opacity: 1; } .formbold-builder .formbold-builder-preview.is-editing .edit-form { z-index: 2000; border-right: 1px solid #ddd; right: 0; transition: 0.5s; } .formbold-builder .formbold-builder-preview.is-editing .edit-form .edit-overlay { right: 0; } .formbold-builder .formbold-builder-toolbar { width: 100%; } .formbold-builder .formbold-builder-toolbar h4 { margin-top: 0; text-align: center; } .formbold-builder .formbold-builder-toolbar .form-group { padding: 10px; border: 1px dashed #ddd; } .image-upload-container { position: relative; } .image-upload-container .image-upload { position: relative; opacity: 0; z-index: 2; height: 50px; } .image-upload-container .image-upload-control { position: absolute; top: 0px; left: 0px; z-index: 1; } .image-upload-preview { border: 4px solid #fff; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); } .file-upload-preview { border: 4px solid #fff; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); padding: 5px; } .btn-image-clear { margin: 15px 0; padding: 15px; } .btn-file-upload-clear { margin: auto; padding: 10px; } @media (max-width: 768px) { .formbold-builder { position: relative; } .formbold-builder .formbold-builder-preview { width: 100%; } .formbold-builder .formbold-builder-preview .edit-form { width: 100%; overflow: scroll; } .formbold-builder .formbold-builder-preview .edit-form .btn { margin-top: 10px; } .formbold-builder .formbold-builder-preview .edit-form .dynamic-option-list ul li input.form-control { width: 100%; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item .toolbar-header .toolbar-header-buttons { right: -15px; } .formbold-builder .formbold-builder-preview .Sortable .fb-builder-item .toolbar-header .toolbar-header-buttons .btn { margin-right: 5px; border-radius: 50%; padding: 7px 0px 0 3px; width: 35px; height: 35px; } .formbold-builder .formbold-builder-toolbar { width: 100%; z-index: 900; bottom: -320px; transition: transform 0.5s; transform: translate(0, 0); right: 0; border-top: 2px solid #ccc; } .formbold-builder .formbold-builder-toolbar h4 { padding: 10px; background: #7a0019; color: #fff; } .formbold-builder .formbold-builder-toolbar ul { height: 300px; overflow-x: scroll; } .formbold-builder .active-toolbar { transform: translate(0, -300px); } .m-signature-pad { top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; min-width: 250px; min-height: 140px; margin: 0; } } .visible_marks { display: block; width: 100%; padding: 0 4px; } .visible_marks label { text-align: center; display: inline-block; padding: 0; margin: 0; font-weight: normal; } .visible_marks label:first-of-type { text-align: left; } .visible_marks label:last-of-type { text-align: right; } .m-signature-pad { font-size: 10px; width: auto; } .m-signature-pad .m-signature-pad--body { width: auto; height: 200px; border: 1px solid #e8e8e8; background-color: #fff; height: 200px; border-radius: 4px; } .m-signature-pad .m-signature-pad--body canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset; } .m-signature-pad .m-signature-pad--footer { position: relative; margin-top: 10px; } .form-place-holder { text-align: center; border-radius: 5px; padding: 25px; color: #bbb; } .form-place-holder-hidden { min-height: 50px; } .validation-error { position: fixed; width: 100%; top: 0; left: 0; margin: 0; z-index: 99999999; } .validation-error ul { width: auto; } .validation-error .dismiss-modal-button { margin-top: 10px; } .formbold-builder-form { position: relative; } .formbold-builder-form .fb-builder-item.alwaysbreak { page-break-before: always; } .formbold-builder-form .fb-builder-item.nobreak:before { clear: both; } .formbold-builder-form .fb-builder-item.nobreak { page-break-inside: avoid; } .formbold-builder-form .fb-builder-item { padding: 10px 0; position: relative; } .formbold-builder-form .fb-builder-item img { max-width: 100%; } .formbold-builder-form .fb-builder-item label { font-weight: normal; } .formbold-builder-form .fb-builder-item .bold { font-weight: bold; } .formbold-builder-form .fb-builder-item .italic { font-style: italic; } .formbold-builder-form .fb-builder-item .form-label { display: block !important; } .formbold-builder-form .fb-builder-item .form-group .option-inline { display: inline-block !important; margin-right: 10px; } .formbold-builder-form .fb-builder-item .form-group a { cursor: pointer; } .formbold-builder-form .fb-builder-item .form-group input[type="date"] { height: 42px; } .formbold-builder-form .fb-builder-item .form-group .m-signature-pad { position: relative; width: auto; } .formbold-builder-form .fb-builder-item .form-group .react-star-rating { display: block; } .formbold-builder-form .fb-builder-item .form-group .checkbox-label, .formbold-builder-form .fb-builder-item .form-group .radio-label { font-weight: normal; display: block; } .formbold-builder-form .fb-builder-item .form-group .label-required { margin-left: 5px; } .share_form_div { padding: 20px 10px; } .share_form_div select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; }