/** * Theming */ .fjs-container { --color-blue-base-65: #4d90ff; --color-blue-base-65-opacity-10: rgba(77, 144, 255, 0.1); --color-blue-darken-48: #005df7; --color-blue-darken-55: #1a70ff; --color-blue-darken-62: #3c85ff; --color-blue-lighten-75: #80b0ff; --color-blue-lighten-82: #a2c5ff; --color-blue-lighten-93: #dbe9ff; --color-silver-base-97: #f8f8f8; --color-silver-lighten-99: #fcfcfc; --color-silver-darken-80: #cdcdcd; --color-silver-darken-87: #dedede; --color-silver-darken-94: #efefef; --color-grey-base-40: #666666; --color-grey-lighten-56: #909090; --color-grey-darken-23: #3b3b3b; --color-grey-darken-30: #4c4c4c; --color-grey-darken-33: #535353; --color-red-base-62: #ff3d3d; --color-red-darken-38: #C20000; --color-red-lighten-85: #ffb3b3; --color-black: #000000; --color-white: #ffffff; --color-background: var(--color-white); --color-background-disabled: var(--color-silver-darken-94); --color-text: var(--color-grey-darken-23); --color-text-light: var(--color-grey-lighten-56); --color-text-lighter: var(--color-grey-base-40); --color-text-inverted: var(--color-white); --color-borders: var(--color-grey-lighten-56); --color-borders-disabled: var(--color-silver-darken-80); --color-warning: var(--color-red-darken-38); --color-accent: var(--color-blue-darken-62); --color-accent-dark: var(--color-blue-darken-48); --font-family: 'IBM Plex Sans', sans-serif; height: 100%; } /** * Layout styles */ .fjs-container .fjs-vertical-layout { display: flex; flex-direction: column; } .fjs-container .fjs-columns { display: flex; flex-direction: row; } .fjs-container .fjs-column { flex-grow: 1; } .fjs-container img { max-width: 100%; } /** * Visual styles */ .fjs-container .fjs-form { font-family: var(--font-family); font-size: 14px; line-height: 1.3; font-weight: 400; color: var(--color-text); background-color: var(--color-background); position: relative; } .fjs-container .fjs-form * { box-sizing: border-box; } .fjs-container .fjs-form-field { margin: 16px; } .fjs-container .fjs-form-field-placeholder { color: var(--color-text-light); } .fjs-container .fjs-input, .fjs-container .fjs-textarea, .fjs-container .fjs-select { border-color: var(--color-borders); background-color: var(--color-background); } .fjs-container .fjs-input::placeholder, .fjs-container .fjs-textarea::placeholder, .fjs-container .fjs-select > option:disabled, .fjs-container .fjs-select [disabled] { font-style: italic; letter-spacing: .25px; color: var(--color-text-light); } .fjs-container .fjs-form-field-label { display: flex; align-items: center; } .fjs-container .fjs-form-field-description { display: block; color: var(--color-text-lighter); } .fjs-container .fjs-form-field-label, .fjs-container .fjs-form-field-description { margin: 4px 0; } .fjs-container .fjs-form-field.required label::after, .fjs-container .fjs-form-field.required .group-title::after { content: "*"; } .fjs-container .fjs-checkbox.group.required label::after, .fjs-container .fjs-radio.required label::after { display: none; } .fjs-container .fjs-input[type=text], .fjs-container .fjs-input[type=number], .fjs-container .fjs-button[type=submit], .fjs-container .fjs-button[type=reset], .fjs-container .fjs-textarea, .fjs-container .fjs-select { display: block; width: 100%; padding: 8px; margin: 4px 0; border-width: 1px; border-style: solid; border-radius: 3px; } .fjs-container .fjs-textarea { height: 90px; } .fjs-container .fjs-radio { display: flex; flex-direction: column; } .fjs-container .fjs-input[type=checkbox], .fjs-container .fjs-input[type=radio] { margin: 6px 10px 6px 4px; } .fjs-container .fjs-button[type=submit] { color: var(--color-text-inverted); background-color: var(--color-accent); border-color: var(--color-accent); } .fjs-container .fjs-button[type=reset] { color: var(--color-text); background-color: transparent; border-color: var(--color-borders); } .fjs-container .fjs-button[type=submit], .fjs-container .fjs-button[type=reset] { min-width: 100px; width: auto; } .fjs-container .fjs-button[type=submit] { font-weight: 600; } .fjs-container .fjs-input[type=text]:focus, .fjs-container .fjs-input[type=number]:focus, .fjs-container .fjs-button[type=submit]:focus, .fjs-container .fjs-button[type=reset]:focus, .fjs-container .fjs-textarea:focus, .fjs-container .fjs-select:focus { outline: none; padding: 7px; border-width: 2px; } .fjs-container .fjs-button[type=submit]:focus { border-color: var(--color-accent-dark); } .fjs-container .fjs-input:disabled, .fjs-container .fjs-textarea:disabled, .fjs-container .fjs-select:disabled { background-color: var(--color-background-disabled); border-color: var(--color-borders-disabled); } .fjs-container .fjs-button[type=submit]:disabled, .fjs-container .fjs-button[type=reset]:disabled { color: var(--text-light); background-color: var(--color-background-disabled); border-color: var(--color-borders-disabled); } .fjs-container .fjs-form-field.fjs-has-errors .fjs-input, .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea { border-color: var(--color-warning); } .fjs-container .fjs-form-field-error { color: var(--color-warning); } .fjs-container .fjs-form-field-error > ul { list-style-type: none; margin: 0; padding: 0; } .fjs-container .fjs-form-field-error > ul > li { list-style-type: none; } .fjs-container .fjs-form-field-text a { color: var(--color-blue-darken-48); }