#stacks_in_11 { padding: 60px 0px 40px 40px; } #stacks_in_51 { background-color: rgba(255, 255, 255, 1.00); padding: 40px 20px 20px 20px; } #stacks_in_13 { background-color: rgba(255, 255, 255, 1.00); padding: 20px; } #stacks_in_15 { background-color: rgba(255, 255, 255, 1.00); padding: 20px 20px 20px 20px; } /* 1.8.1 - fixed a bug that could the form to not submit if "Exclude Incomplete Fields" was disabled - replaced multiple select with custom mutli-select field ----- replaced option elements, they were not supported in safari ----- more of the feature is built out - you can now add a delay before redirecting on succssful submition - you can now disable radio and checkbox fields - single quotes are escaped from select fields */ #stacks_in_17.sf-styles,#stacks_in_17.sf-styles * {box-sizing: border-box;} #stacks_in_17.sf-styles .age-field, #stacks_in_17.sf-styles .agree-to-terms-field { overflow: hidden; height: 0; margin: 0 !important; } #stacks_in_17.sf-styles label.keepIt{text-align:left;display:inline-block;width:100%;padding-left:5px} #stacks_in_17.sf-styles select{color:#aaa}.php{display:none} #stacks_in_17.sf-styles .info{color:#00529B;background-color:#BDE5F8} #stacks_in_17.sf-styles .success{color:#4F8A10;background-color:rgba(47, 134, 56, 1.00)} #stacks_in_17.sf-styles .warning{color:#9F6000;background-color:#FEEFB3} #stacks_in_17.sf-styles .error{color:#D8000C;background-color:rgba(216, 0, 12, 1.00)} #stacks_in_17.sf-styles .sf-message { position: absolute; left: 0; right: 0; top: 0; width: 100%; } #stacks_in_17.sf-styles .submitMessage, #stacks_in_17.sf-styles .errorMessage { background-size: 40px 40px; background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); width: 100%; border: 1px solid; color: #fff !important; padding: 10px 15px; border-radius:3px; margin-right: 28px; position: absolute; top: 0; left: 0; transform: translateY(-50%); z-index: 99; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0px 8px 16px rgba(0,0,0,0.2); animation: sf-message-in-out 5s ease-in-out forwards; cursor: pointer; } @keyframes sf-message-in-out { 0% { transform: translateY(0%); opacity: 0 } 5% { transform: translateY(-50%); opacity: 1 } 95% { transform: translateY(-50%); opacity: 1} 100% { transform: translateY(0%); opacity: 0} } #stacks_in_17.sf-styles.sf-no-help-text .submitMessage { margin-right: 0px; } #stacks_in_17.sf-styles.sf-no-help-text .sf-help-column { display: none; } #stacks_in_17.sf-styles .sf-help-column { transform: none !important; } #stacks_in_17.sf-styles .info { background-color: #61b832; border-color: #3b8eb5; } #stacks_in_17.sf-styles .error, #stacks_in_17.sf-styles .errorMessage { background-color: rgba(216, 0, 12, 1.00); border-color: rgba(0,0,0,0.25); } #stacks_in_17.sf-styles .warning { background-color: #eaaf51; border-color: #d99a36; } #stacks_in_17.sf-styles .success { background-color:rgba(47, 134, 56, 1.00); border-color: rgba(0,0,0,0.25); padding: 10px 15px 5px 15px; } #stacks_in_17.sf-styles .submitMessage h3 { font-size: 16px; line-height: 1.4; color: #fff; font-weight: bold; } #stacks_in_17.sf-styles .submitMessage h3:not(:last-child) { margin: 0 0 5px 0 !important; } #stacks_in_17.sf-styles .submitMessage h3:last-child { margin: 0 !important; } #stacks_in_17.sf-styles .submitMessage p { margin: 0; font-size: 16px; line-height: 1.4; color: #fff; } #g-captcha { position: absolute; pointer-events: none; left: 0; width: 50px; bottom: 0; opacity: 0; } #stacks_in_17.sf-styles .g-recaptcha { min-width: 0; margin: 0; } /* ---------------------------------------- */ #stacks_in_17.sf-styles form { background: rgba(255, 255, 255, 1.00); padding: 16px 32px; border-radius: 2px; margin: 0px auto; border: 0px solid rgba(243, 243, 243, 1.00); display: inline-block; max-width: 100%; } #stacks_in_17.sf-styles form .note { display: block; font-size: 75%; line-height: 1.2; color: rgba(0, 0, 0, 0.80); margin: 0px 8px; opacity: .75; } #stacks_in_17.sf-styles form .note p { margin: 0; } #stacks_in_17.sf-styles .controls { position: relative; margin-bottom: 16px; width: 1000px; max-width: 100%; display: grid; grid-template-columns: 80px 1fr 20px; align-items: center; align-content: flex-start; grid-gap: 4px 8px; } #stacks_in_17.sf-styles .controls.sf-radio { margin-bottom: 0px; } #stacks_in_17.sf-styles .controls.sf-radio + .controls:not(.sf-radio) { margin-top: 16px; } #stacks_in_17.sf-styles .sf-radio-group .controls.sf-button-group.hidden, #stacks_in_17.sf-styles .controls.hidden { display: none !important; pointer-events: none; } #stacks_in_17.sf-styles .controls.sf-disabled.sf-input { cursor: not-allowed; } #stacks_in_17.sf-styles .controls.sf-disabled.sf-checkbox label, #stacks_in_17.sf-styles .controls.sf-disabled.sf-checkbox input, #stacks_in_17.sf-styles .controls.sf-disabled.sf-input label, #stacks_in_17.sf-styles .controls.sf-disabled.sf-input input { opacity: .5; pointer-events: none; } #stacks_in_17.sf-styles.sf-no-help-text .controls { grid-template-columns: 80px 1fr; } #stacks_in_17.sf-styles .deluxe-columns > div { min-width: 0; } #stacks_in_17.sf-styles .form-group > div:nth-child(2) { margin-top: 16px; } #stacks_in_17.sf-styles .controls.sf-checkbox { grid-template-columns: 80px 22px 1fr 20px; } #stacks_in_17.sf-styles.sf-no-help-text .controls.sf-checkbox { grid-template-columns: 80px 22px 1fr; } #stacks_in_17.sf-styles .controls.sf-checkbox label { cursor: pointer; } #stacks_in_17.sf-styles .controls.sf-submit { grid-template-columns: 80px min-content 20px; grid-gap: 0px 8px; } #stacks_in_17.sf-styles .controls.sf-submit .sf-message:empty { display: none; } #stacks_in_17.sf-styles.sf-no-help-text .controls.sf-submit { grid-template-columns: 80px min-content; } #stacks_in_17.sf-styles .controls.sf-file { grid-template-columns: 80px 1fr min-content 20px; } #stacks_in_17.sf-styles.sf-no-help-text .controls.sf-file { grid-template-columns: 80px 1fr min-content; } #stacks_in_17.sf-styles .hiddenFormSubmit { display: none; } #stacks_in_17.sf-styles .steps .step .controls label, #stacks_in_17.sf-styles .controls label { font-size: 16px; line-height: 1; } #stacks_in_17.sf-styles .controls label { color: rgba(0, 0, 0, 0.80); margin: 0; } #stacks_in_17.sf-styles .controls label img { display: inline; } #stacks_in_17.sf-styles .controls:not(.sf-checkbox) label { pointer-events: none; } #stacks_in_17.sf-styles .controls .field-icon { position: absolute; right: 8px; top: 50%; fill: rgba(0, 0, 0, 0.65); margin: 0; width: 16px; height: 16px; pointer-events: none; transform: translate(0,-50%); } #stacks_in_17.sf-styles .sf-multi-select .field-icon { opacity: 0; } #stacks_in_17.sf-styles .controls { font-size: 16px; } #stacks_in_17.sf-styles form .controls .step-input-wrap { position: relative; } #stacks_in_17.sf-styles .controls input, #stacks_in_17.sf-styles .controls > button, #stacks_in_17.sf-styles .controls select, #stacks_in_17.sf-styles .controls select + .sf-multi-select-mobile, #stacks_in_17.sf-styles .controls .fileUpload, #stacks_in_17.sf-styles .controls .fileUpload span { font-size: 16px; line-height: 16px; height: 34px; color: rgba(0, 0, 0, 0.65); } #stacks_in_17.sf-styles .controls select + .sf-multi-select-mobile { height: auto; } #stacks_in_17.sf-styles .controls input::-webkit-calendar-picker-indicator { opacity: 0; } #stacks_in_17.sf-styles .controls input:focus, #stacks_in_17.sf-styles .controls select:focus, #stacks_in_17.sf-styles .controls textarea:focus, #stacks_in_17.sf-styles .controls button:focus { outline: none; } #stacks_in_17.sf-styles .controls.sf-checkbox label { font-size: 16px; line-height: 16px; } #stacks_in_17.sf-styles .controls textarea { font-size: 16px; line-height: 16px; color: rgba(0, 0, 0, 0.65); } #stacks_in_17.sf-styles .controls select.is-placeholder option, #stacks_in_17.sf-styles .controls select.is-placeholder + .sf-multi-select-mobile .sf-option { color: rgba(0, 0, 0, 0.65); } #stacks_in_17.sf-styles .controls input::placeholder, #stacks_in_17.sf-styles .controls textarea::placeholder, #stacks_in_17.sf-styles .controls select.is-placeholder option[disabled] { color: rgba(0, 0, 0, 0.35); color: ; opacity: 1; } #stacks_in_17.sf-placeholder .controls input::placeholder, #stacks_in_17.sf-placeholder .controls textarea::placeholder, #stacks_in_17.sf-placeholder .controls select:invalid, #stacks_in_17.sf-classic .controls input::placeholder, #stacks_in_17.sf-classic .controls textarea::placeholder, #stacks_in_17.sf-classic .controls select.is-placeholder { color: transparent; } #stacks_in_17.sf-styles .controls .sf-number-wrap, #stacks_in_17.sf-styles .controls input, #stacks_in_17.sf-styles .controls textarea, #stacks_in_17.sf-styles .controls > button, #stacks_in_17.sf-styles .controls select, #stacks_in_17.sf-styles .controls select + .sf-multi-select-mobile, #stacks_in_17.sf-styles .controls .fileUpload { padding: 8px 8px; border: 1px solid rgba(0, 0, 0, 0.15); width: 100%; margin: 0px; color: rgba(0, 0, 0, 0.65); background-color: rgba(0, 0, 0, 0.00); border-radius: 2px; transition: all 0.3s; } #stacks_in_17.sf-styles .controls select + .sf-multi-select-mobile { padding: 8px 0px; } #stacks_in_17.sf-styles .controls .sf-number-wrap { padding: 0; color: rgba(0, 0, 0, 0.65); } #stacks_in_17.sf-styles .controls input[type="number"] { border-color: transparent !important; background-color: transparent !important; } #stacks_in_17.sf-styles .controls .sf-number-wrap { display: grid; grid-template-columns: 1fr min-content; align-items: center; grid-gap: 0px; position: relative; } #stacks_in_17.sf-styles .controls input::-webkit-outer-spin-button, #stacks_in_17.sf-styles .controls input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #stacks_in_17.sf-styles .controls input[type=number] { -moz-appearance: textfield; } #stacks_in_17.sf-styles .quantity-nav { height: 24px; display: grid; grid-gap: 2px; margin-left: 8px; margin-right: 4px; grid-template-columns: 1fr 1fr; } #stacks_in_17.sf-styles .quantity-button { font-family: "helvetica-Neue",helvetica; font-weight: 400; position: relative; cursor: pointer; border: none; width: 24px; text-align: center; font-size: 14px; line-height: 22px; height: 24px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; background-color: rgba(0,0,0,0.05); } #stacks_in_17.sf-styles .quantity-button.quantity-up:before { content: "+"; } #stacks_in_17.sf-styles .quantity-button.quantity-down:before { content: "-"; } #stacks_in_17.sf-styles .quantity-button:active:after { content: ""; position: absolute; left:0;top:0;right:0;bottom:0; background: rgba(0,0,0,0.05); pointer-events: none; } #stacks_in_17.sf-styles .controls input[type="checkbox"], #stacks_in_17.sf-styles .controls input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; } #stacks_in_17.sf-styles .controls select, #stacks_in_17.sf-styles .controls select + .sf-multi-select-mobile { line-height: 20px; padding: 6px 8px; } #stacks_in_17.sf-styles .controls select + .sf-multi-select-mobile { padding: 6px 0; } #stacks_in_17.sf-styles .controls > button { position: relative; white-space: nowrap; } #stacks_in_17.sf-styles .controls > button.sf-submitting { color: transparent; } #stacks_in_17.sf-styles .controls > button svg { pointer-events: none; opacity: 0; position: absolute; width: 16px; height: 16px; left: 50%; top: 50%; margin-left: -8px; margin-top: -8px; } #stacks_in_17.sf-styles .controls > button.sf-submitting svg { opacity: 1; transition: opacity 300ms ease; animation: sf-loading 1000ms linear infinite; transform-origin: 8px 9px; } #stacks_in_17.sf-styles .controls > button svg path { stroke: #fff; } #stacks_in_17.sf-styles .controls > button, #stacks_in_17.sf-styles .controls .fileUpload { padding: 8px 16px; } @-webkit-keyframes sf-loading { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes sf-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #stacks_in_17.sf-styles .controls .fileUpload { border-color: transparent; } #stacks_in_17.sf-styles form .hint, #stacks_in_17.sf-styles form .message { font-size: 14px; line-height: 1.3; position: relative; left: 0; color: #6f6f6f; padding: 12px; margin: 0px; background: -moz-linear-gradient(#ffffff, #f7f7f6 30%); background: -webkit-linear-gradient(#ffffff, #f7f7f6 30%); background: linear-gradient(#ffffff, #f7f7f6 30%); border-radius: 3px; vertical-align: top; pointer-events: none; box-shadow: 0px 8px 16px rgba(0,0,0,0.2); } #stacks_in_17.sf-styles form .hint:before, #stacks_in_17.sf-styles form .hint:after, #stacks_in_17.sf-styles form .message:before, #stacks_in_17.sf-styles form .message:after { content: ""; display: block; height: 0; width: 0; border-style: solid; border-width: 8px 8px 8px 8px; border-color: #f7f7f6 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); position: absolute; top: auto; left: 8px; margin-top: -8px; z-index: 2; bottom: -14px; } #stacks_in_17.sf-styles form .hint:after, #stacks_in_17.sf-styles form .message:after { z-index: 1; bottom: -15px; } #stacks_in_17.sf-styles form .hint { opacity: 0; position: absolute; left: calc(80px + 8px); right: 28px; bottom: 0%; top: auto; } #stacks_in_17.sf-styles.sf-no-help-text form .hint { right: 0px; } #stacks_in_17.sf-styles form .message ~ .hint { display: none; } #stacks_in_17.sf-styles form .controls .sf-focused ~ .hint { transition: all 300ms ease; opacity: 1; bottom: calc(100% + 8px); } #stacks_in_17.sf-styles form .help { height: 20px; } #stacks_in_17.sf-styles form .help i { display: block; position: relative; height: 20px; width: 20px; line-height: 16px; font-size: 16px; padding-top: 1px; text-align: center; color: #a2a2a2; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid rgba(0,0,0,0.3); background: #f7f7f6 -moz-linear-gradient(#ffffff, #ededec); background: #f7f7f6 -webkit-linear-gradient(#ffffff, #ededec); background: #f7f7f6 linear-gradient(#ffffff, #ededec); cursor: help; font-style: normal; } #stacks_in_17.sf-styles form .help i:hover { color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border-color: #585854; background: #585854 -moz-linear-gradient(#6d6d67, #60605b); background: #585854 -webkit-linear-gradient(#6d6d67, #60605b); background: #585854 linear-gradient(#6d6d67, #60605b); } #stacks_in_17.sf-styles form .help i:after { display: none; opacity: 0.97; content: ""; height: 0; width: 0; border-style: solid; border-width: 0 9px 8px 9px; border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #6d6d67; position: absolute; bottom: -11px; left: 0px; z-index: 11; } #stacks_in_17.sf-styles form .help > span { display: none; opacity: 0.97; position: absolute; right: -2px; left: calc(80px + 8px); top: calc(8px + 8px + 16px); z-index: 10; padding: 7px 10px 9px 10px; margin: 0; border-radius: 3px; background: -moz-linear-gradient(#6d6d67, #585854 20%); background: -webkit-linear-gradient(#6d6d67, #585854 20%); background: linear-gradient(#6d6d67, #585854 20%); color: white; border-color: #585854; text-align: left; line-height: 1.2; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); font-size: 16px; line-height: 1.4; } #stacks_in_17.sf-styles form .help i:hover:after { display: block; } #stacks_in_17.sf-styles form .help i:hover ~ span { display: block; white-space: normal; } #stacks_in_17.sf-styles .controls.sf-checkbox .note, #stacks_in_17.sf-styles .controls.sf-file .note { grid-column: span 2; } #stacks_in_17.sf-styles .controls.sf-textarea, #stacks_in_17.sf-styles .controls.sf-multi-select { align-items: flex-start; } #stacks_in_17.sf-styles form .controls.sf-textarea .help, #stacks_in_17.sf-styles form .controls.sf-multi-select .help { margin-top: 8px; } /* left */ #stacks_in_17.sf-left .controls { width: calc(80px + 1000px); } #stacks_in_17.sf-left .controls:not(.sf-checkbox) label { font-weight: 600; } #stacks_in_17.sf-left .controls.sf-textarea label, #stacks_in_17.sf-left .controls.sf-multi-select label { margin-top: 8px; } @media all and (max-width: 500px) { #stacks_in_17.sf-left .controls { width: 1000px; } #stacks_in_17.sf-left form .controls .sf-focused ~ .hint { margin-top: 16px; } #stacks_in_17.sf-left form .controls:not(.sf-checkbox) .help > span { margin-top: 22px; } #stacks_in_17.sf-left form .hint, #stacks_in_17.sf-left form .help > span { left: 0px; } #stacks_in_17.sf-left .controls.sf-textarea label, #stacks_in_17.sf-left .controls.sf-multi-select label { margin-top: 0px; } #stacks_in_17.sf-left .controls { grid-template-columns: 1fr 20px; grid-gap: 4px 8px; } #stacks_in_17.sf-left.sf-no-help-text .controls { grid-template-columns: 1fr; } #stacks_in_17.sf-left .dropdown-menu { margin-left: 0px; } #stacks_in_17.sf-left .controls.sf-checkbox { grid-template-columns: 22px 1fr 20px; } #stacks_in_17.sf-left.sf-no-help-text .controls.sf-checkbox { grid-template-columns: 22px 1fr; } #stacks_in_17.sf-left .controls.sf-submit { grid-template-columns: min-content 20px; } #stacks_in_17.sf-left.sf-no-help-text .controls.sf-submit { grid-template-columns: min-content; } #stacks_in_17.sf-left .controls .sf-empty-column { display: none; } #stacks_in_17.sf-left .controls.sf-file { grid-template-columns: 1fr min-content 20px; } #stacks_in_17.sf-left.sf-no-help-text .controls.sf-file { grid-template-columns: 1fr min-content; } #stacks_in_17.sf-left .controls:not(.sf-checkbox) label { grid-column: 1/-1; padding: 0; font-weight: 600; } } /* end left */ /* top */ #stacks_in_17.sf-top form .controls .sf-focused ~ .hint { margin-top: 16px; } #stacks_in_17.sf-top .controls .note, #stacks_in_17.sf-top .controls.sf-checkbox .note, #stacks_in_17.sf-top .controls.sf-file .note { grid-column: 1/-1; } #stacks_in_17.sf-top form .controls:not(.sf-checkbox) .help > span { margin-top: 22px; } #stacks_in_17.sf-top form .hint, #stacks_in_17.sf-top form .help > span { left: 0px; } #stacks_in_17.sf-top .controls.sf-textarea label, #stacks_in_17.sf-top .controls.sf-multi-select label { margin-top: 0px; } #stacks_in_17.sf-top .controls { grid-template-columns: 1fr 20px; grid-gap: 4px 8px; } #stacks_in_17.sf-top.sf-no-help-text .controls { grid-template-columns: 1fr; } #stacks_in_17.sf-top .dropdown-menu { margin-left: 0px; } #stacks_in_17.sf-top .controls.sf-checkbox { grid-template-columns: 22px 1fr 20px; } #stacks_in_17.sf-top.sf-no-help-text .controls.sf-checkbox { grid-template-columns: 22px 1fr; } #stacks_in_17.sf-top .controls.sf-submit { grid-template-columns: min-content 20px; } #stacks_in_17.sf-top.sf-no-help-text .controls.sf-submit { grid-template-columns: min-content; } #stacks_in_17.sf-top .controls .sf-empty-column { display: none; } #stacks_in_17.sf-top .controls.sf-file { grid-template-columns: 1fr min-content 20px; } #stacks_in_17.sf-top.sf-no-help-text .controls.sf-file { grid-template-columns: 1fr min-content; } #stacks_in_17.sf-top .controls:not(.sf-checkbox) label { grid-column: 1/-1; padding: 0; font-weight: 600; } /* end top */ /* placeholder */ #stacks_in_17.sf-placeholder form .hint, #stacks_in_17.sf-placeholder form .help > span { left: 0px; } #stacks_in_17.sf-placeholder .controls .note, #stacks_in_17.sf-placeholder .controls.sf-checkbox .note, #stacks_in_17.sf-placeholder .controls.sf-file .note { grid-column: 1/-1; } #stacks_in_17.sf-placeholder .controls { grid-template-columns: 1fr 20px; grid-gap: 4px 8px; } #stacks_in_17.sf-placeholder.sf-no-help-text .controls { grid-template-columns: 1fr; } #stacks_in_17.sf-placeholder .dropdown-menu { margin-left: 0px; } #stacks_in_17.sf-placeholder .controls.sf-checkbox { grid-template-columns: 22px 1fr 20px; } #stacks_in_17.sf-placeholder.sf-no-help-text .controls.sf-checkbox { grid-template-columns: 22px 1fr; } #stacks_in_17.sf-placeholder .controls.sf-submit { grid-template-columns: min-content 20px; } #stacks_in_17.sf-placeholder.sf-no-help-text .controls.sf-submit { grid-template-columns: min-content; } #stacks_in_17.sf-placeholder .controls .sf-empty-column { display: none; } #stacks_in_17.sf-placeholder .controls.sf-file { grid-template-columns: 1fr min-content 20px; } #stacks_in_17.sf-placeholder.sf-no-help-text .controls.sf-file { grid-template-columns: 1fr min-content; } #stacks_in_17.sf-placeholder .controls:not(.sf-checkbox) label { grid-column: 1/-1; padding: 0; } #stacks_in_17.sf-placeholder .controls:not(.sf-checkbox) label { position: absolute; left: 4px; top: 8px; display: inline-block; padding: 0px 4px; transition: opacity 0.3s; pointer-events: none; opacity: 1; z-index: 1; } #stacks_in_17.sf-placeholder .controls.sf-checkbox label { display: block; } #stacks_in_17.sf-placeholder .controls:not(.sf-checkbox) label.sf-active { opacity: 0; } #stacks_in_17.sf-placeholder .controls:not(.sf-checkbox) label:not(.sf-active) + div input { color: transparent; } /* end placeholder */ /* classic */ #stacks_in_17.sf-classic form .controls .sf-focused ~ .hint { bottom: calc(100% + 16px); } #stacks_in_17.sf-classic .controls .note, #stacks_in_17.sf-classic .controls.sf-checkbox .note, #stacks_in_17.sf-classic .controls.sf-file .note { grid-column: 1/-1; } #stacks_in_17.sf-classic form .hint, #stacks_in_17.sf-classic form .help > span { left: 0px; } #stacks_in_17.sf-classic form .controls:not(.sf-checkbox) .help > span { margin-top: 4px; } #stacks_in_17.sf-classic .controls { grid-template-columns: 1fr 20px; grid-gap: 4px 8px; } #stacks_in_17.sf-classic.sf-no-help-text .controls { grid-template-columns: 1fr; } #stacks_in_17.sf-classic .dropdown-menu { margin-left: 0px; } #stacks_in_17.sf-classic .controls.sf-checkbox { grid-template-columns: 22px 1fr 20px; } #stacks_in_17.sf-classic.sf-no-help-text .controls.sf-checkbox { grid-template-columns: 22px 1fr; } #stacks_in_17.sf-classic .controls.sf-submit { grid-template-columns: min-content 20px; } #stacks_in_17.sf-classic.sf-no-help-text .controls.sf-submit { grid-template-columns: min-content; } #stacks_in_17.sf-classic .controls .sf-empty-column { display: none; } #stacks_in_17.sf-classic .controls.sf-file { grid-template-columns: 1fr min-content 20px; } #stacks_in_17.sf-classic.sf-no-help-text .controls.sf-file { grid-template-columns: 1fr min-content; } #stacks_in_17.sf-classic .controls:not(.sf-checkbox) label { grid-column: 1/-1; padding: 0; } #stacks_in_17.sf-classic .controls:not(.sf-checkbox) label { position: absolute; left: 6px; top: 12px; border-radius: 2px; display: inline-block; padding: 0px 6px; background-color: rgba(255, 255, 255, 0); transition: color 0.3s, top 0.3s, background-color 0.8s; z-index: 1; } #stacks_in_17.sf-classic .controls.sf-checkbox label { display: block; } #stacks_in_17.sf-classic .controls:not(.sf-checkbox) label.sf-active { top: -8px; z-index: 2; background-color: rgba(255, 255, 255, 1.00); } #stacks_in_17.sf-classic .controls:not(.sf-checkbox) label:not(.sf-active) + div input { color: transparent; } #stacks_in_17.sf-classic .controls input, #stacks_in_17.sf-classic .controls > button, #stacks_in_17.sf-classic .controls select, #stacks_in_17.sf-classic .controls select + .sf-multi-select-mobile, #stacks_in_17.sf-classic .controls .fileUpload, #stacks_in_17.sf-classic .controls .fileUpload span { padding: 12px; height: 42px; } #stacks_in_17.sf-classic .controls select + .sf-multi-select-mobile { padding: 12px 0; } #stacks_in_17.sf-classic .controls select + .sf-multi-select-mobile { height: auto; } #stacks_in_17.sf-classic .controls input[type="checkbox"], #stacks_in_17.sf-classic .controls input[type="radio"] { padding: 0; } #stacks_in_17.sf-classic .controls textarea { padding: 12px; } #stacks_in_17.sf-classic .controls > button { padding: 12px 24px; } /* end classic */ #stacks_in_17.sf-styles .controls input, #stacks_in_17.sf-styles .controls textarea, #stacks_in_17.sf-styles .controls button, #stacks_in_17.sf-styles .controls select, #stacks_in_17.sf-styles .controls select + .sf-multi-select-mobile, #stacks_in_17.sf-styles .controls input[type="checkbox"]:after, #stacks_in_17.sf-styles .controls input[type="radio"]:after, #stacks_in_17.sf-styles input[type="checkbox"] + .sf-captcha > .g-recaptcha iframe { box-shadow: none; } #stacks_in_17.sf-styles .controls input[type="number"].hasError + input, #stacks_in_17.sf-styles .controls input:not([type="radio"]):not([type="checkbox"]):not([type="number"]).hasError, #stacks_in_17.sf-styles .controls input.sf-upload + label, #stacks_in_17.sf-styles .controls textarea.hasError, #stacks_in_17.sf-styles .controls button.hasError, #stacks_in_17.sf-styles .controls select.hasError, #stacks_in_17.sf-styles .controls select.hasError + .sf-multi-select-mobile, #stacks_in_17.sf-styles input[type="checkbox"].hasError + .sf-captcha > .g-recaptcha iframe { box-shadow: inset 0 0 0 1000px rgba(249,217,73,0.33); } #stacks_in_17.sf-styles .controls input[type="checkbox"]:not(:checked).hasError:after, #stacks_in_17.sf-styles .controls input[type="radio"]:not(:checked).hasError:after { box-shadow: none; background-color: rgba(249,217,73,0.33); content: ""; width: 20px; height: 20px; position: absolute; left: 1px; top: 1px; border-radius: 50%; } #stacks_in_17.sf-styles .controls input[type="checkbox"]:not(:checked).hasError:after { border-radius: 0px; } #stacks_in_17.sf-styles .controls select, #stacks_in_17.sf-styles .controls select + .sf-multi-select-mobile .sf-option, #stacks_in_17.sf-styles .controls.sf-date input { cursor: pointer; -moz-appearance: none; -webkit-appearance: none; } #stacks_in_17.sf-styles .controls textarea { white-space: pre-line; line-height: 1.2; } #stacks_in_17.sf-styles .controls input[type=checkbox], #stacks_in_17.sf-styles .controls input[type=radio] { position: relative; left: 0px; width: 22px; height: 22px; margin: 4px 0px; background: transparent; border-color: transparent; } #stacks_in_17.sf-styles .controls input[type=checkbox]:after, #stacks_in_17.sf-styles .controls input[type=radio]:before { cursor: pointer; content: " "; display: inline-block; width: 20px; height: 20px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.15); line-height: 20px; text-align: center; position: relative; left: 0px; background-image: linear-gradient(rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.00)); } #stacks_in_17.sf-styles .controls input[type=radio]:before { border-radius: 50%; } #stacks_in_17.sf-styles .controls input[type=checkbox]:checked:after { content: "\2714"; /**/ color: rgba(31, 125, 193, 1.00); } #stacks_in_17.sf-styles .controls input[type=radio]:checked:after { content: ""; width: 12px; height: 12px; position: absolute; left: 5px; top: 5px; border-radius: 50%; background-color: rgba(31, 125, 193, 1.00); } #stacks_in_17.sf-styles .controls .fileUpload, #stacks_in_17.sf-styles .controls button { overflow: hidden; background-color: rgba(255, 0, 12, 1.00); border: 1px solid rgba(255, 0, 12, 1.00); color: rgba(248, 236, 207, 1.00); } #stacks_in_17.sf-styles .controls .fileUpload:active, #stacks_in_17.sf-styles .controls button:active { box-shadow: 0 0 0 2000px rgba(0,0,0,0.22) inset; } #stacks_in_17.sf-styles .controls .fileUpload span { white-space: nowrap; color: rgba(248, 236, 207, 1.00); } #stacks_in_17.sf-styles .controls .fileUpload input.upload { position: absolute; top: 0; bottom :0; right: 0; margin: 0; padding: 0; cursor: pointer; opacity: 0; height: 100%; } #stacks_in_17.sf-styles form, #stacks_in_17.sf-styles .controls input, #stacks_in_17.sf-styles .controls textarea { font-family: inherit; } /* */ #stacks_in_17.sf-styles form { font-family: inherit; padding: 16px 20px; border-radius: 0px; border-width: 0px; margin: 0px 0; } #stacks_in_17.sf-styles .controls input, #stacks_in_17.sf-styles .controls textarea { font-family: inherit; } /* */ /* */ #stacks_in_17.sf-styles .steps .step .controls:not(.sf-checkbox) label, #stacks_in_17.sf-styles .controls:not(.sf-checkbox) label { font-size: 16px; line-height: 16px; font-weight: 400; width: calc(100% - 28px); text-align: left; } #stacks_in_17.sf-styles .sf-radio-group .controls.sf-button-group label { font-size: 14px; line-height: 1.1; } #stacks_in_17.sf-styles .controls:not(.sf-checkbox) label img { height: 16px; } #stacks_in_17.sf-styles.sf-no-help-text .controls:not(.sf-checkbox) label { width: 100%; } @media all and (max-width: 500px) { #stacks_in_17.sf-left form .controls .sf-focused ~ .hint { margin-top: 16px; } #stacks_in_17.sf-left form .controls:not(.sf-checkbox) .help > span { margin-top: calc(16px + 8px); } } #stacks_in_17.sf-top form .controls:not(.sf-checkbox) .help > span { margin-top: calc(16px + 8px); } #stacks_in_17.sf-top form .controls .sf-focused ~ .hint, #stacks_in_17.sf-top .controls .fileUpload { margin-top: 16px; } #stacks_in_17.sf-placeholder .form-group .controls:not(.sf-checkbox) label { width: auto; line-height: 16px; } #stacks_in_17.sf-classic .form-group .controls:not(.sf-checkbox) label { width: auto; line-height: 16px; } /* */ /* */ #stacks_in_17.sf-styles .sf-radio-group { margin-bottom: 16px; } #stacks_in_17.sf-styles .controls { margin-bottom: 16px; margin-top: 0px; grid-gap: 4px 8px; } #stacks_in_17.sf-styles .controls.sf-radio { margin-bottom: 0px; } #stacks_in_17.sf-styles .controls.sf-radio + .controls:not(.sf-radio) { margin-top: 16px; } #stacks_in_17.sf-styles .controls.sf-submit { margin-bottom: 0px; } #stacks_in_17.sf-styles .controls.sf-captcha { margin-bottom: 16px; } #stacks_in_17.sf-styles .form-group > div:nth-child(2) { margin-top: 16px; } #stacks_in_17.sf-styles .controls { font-size: 16px; } #stacks_in_17.sf-styles form .controls input, #stacks_in_17.sf-styles form .controls textarea, #stacks_in_17.sf-styles form .controls > button, #stacks_in_17.sf-styles form .controls select, #stacks_in_17.sf-styles form .controls select + .sf-multi-select-mobile, #stacks_in_17.sf-styles form .controls .fileUpload { font-size: 16px; line-height: 16px; font-weight: 400; border-radius: 2px; border-width: 1px; padding: 8px 8px; } #stacks_in_17.sf-styles form .controls .step-input-wrap:before { border-radius: 2px; border-width: 1px; } #stacks_in_17.sf-styles .controls input[type="checkbox"], #stacks_in_17.sf-styles .controls input[type="radio"] { padding: 0; } #stacks_in_17.sf-styles form .controls select, #stacks_in_17.sf-styles form .controls select + .sf-multi-select-mobile { line-height: 20px; padding: 6px 8px; } #stacks_in_17.sf-styles form .controls select + .sf-multi-select-mobile { padding: 6px 0; } #stacks_in_17.sf-styles form .controls .step-input-wrap:before, #stacks_in_17.sf-styles form .controls input, #stacks_in_17.sf-styles form .controls textarea, #stacks_in_17.sf-styles form .controls select, #stacks_in_17.sf-styles form .controls select + .sf-multi-select-mobile, #stacks_in_17.sf-styles form .controls .fileUpload { } #stacks_in_17.sf-styles form .controls .fileUpload span, #stacks_in_17.sf-styles form .controls.sf-checkbox label { font-size: 16px; line-height: 16px; font-weight: 400; } #stacks_in_17.sf-styles form .submitMessage h3, #stacks_in_17.sf-styles form .submitMessage p { font-size: 16px; } #stacks_in_17.sf-styles form .note { margin: 0px 8px; } #stacks_in_17.sf-styles form .message, #stacks_in_17.sf-styles form .help > span { font-size: 16px; line-height: 1.4; } #stacks_in_17.sf-styles .controls > button, #stacks_in_17.sf-styles .controls .fileUpload { padding: 8px 16px; border-width: 1px; } #stacks_in_17.sf-styles .controls textarea { line-height: 1.2; } #stacks_in_17.sf-styles form .controls input, #stacks_in_17.sf-styles form .controls > button, #stacks_in_17.sf-styles form .controls select, #stacks_in_17.sf-styles form .controls .fileUpload { height: calc(16px + 8px + 8px + 2px); } #stacks_in_17.sf-styles form .help > span { top: 34.000000px; } #stacks_in_17.sf-styles form .sf-textarea .help > span, #stacks_in_17.sf-styles form .sf-multi-select .help > span { top: 34px; } #stacks_in_17.sf-styles form .controls .field-icon { width: 16px; height: 16px; right: 8px; } /* */ #stacks_in_17.sf-styles .controls:not(.sf-checkbox) label { line-height: 16px; } /* */ #stacks_in_17.sf-placeholder .controls:not(.sf-checkbox) label { line-height: 16px; top: 8px; left: calc(8px - 2px); } #stacks_in_17.sf-classic .controls:not(.sf-checkbox) label { line-height: 16px; top: 8px; left: calc(8px - 4px); } /* */ #stacks_in_17.sf-styles .controls.sf-submit.sf-full-button-True { grid-template-columns: 1fr 20px; } #stacks_in_17.sf-styles.sf-no-help-text .controls.sf-submit.sf-full-button-True { grid-template-columns: 1fr; } #stacks_in_17.sf-left .controls.sf-submit.sf-full-button-True { grid-template-columns: 80px 1fr 20px; } #stacks_in_17.sf-left.sf-no-help-text .controls.sf-submit.sf-full-button-True { grid-template-columns: 80px 1fr; } #stacks_in_17.sf-styles .controls select[multiple] { height: auto; } #stacks_in_17.sf-styles .controls select[multiple] option, #stacks_in_17.sf-styles .controls select[multiple] + .sf-multi-select-mobile .sf-option { padding: 2px 0px; } #stacks_in_17.sf-styles .controls select[multiple] + .sf-multi-select-mobile .sf-option { padding: 2px 8px; } #stacks_in_17.sf-styles form .controls select + .sf-multi-select-mobile .sf-option.sf-msm-active { background: rgba(255, 0, 12, 1.00); color: rgba(248, 236, 207, 1.00); } #stacks_in_17.sf-styles .form-group .controls select[multiple] option:empty[disabled], #stacks_in_17.sf-styles .form-group .controls.sf-multi-select svg { display: none; } #stacks_in_17.sf-placeholder .form-group .controls.sf-multi-select label, #stacks_in_17.sf-classic .form-group .controls.sf-multi-select label { position: static; } #stacks_in_17.sf-styles .sf-radio-group { display: flex; flex-wrap: wrap; align-items: stretch; grid-gap: 4px; margin-bottom: 16px; } #stacks_in_17.sf-styles .sf-radio-group .controls.sf-button-group { flex: 0 0 auto; margin: 0 0 4px 0; padding: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; align-items: stretch; justify-content: center; } #stacks_in_17.sf-styles .sf-radio-group .controls.sf-button-group.sf-help-text { grid-template-columns: 1fr 20px; } #stacks_in_17.sf-styles form .controls.sf-button-group.sf-help-text .help > span { transform: translate(0,-50%); top: calc(50% + 52px); } #stacks_in_17.sf-styles .sf-radio-group .controls input[type]:after, #stacks_in_17.sf-styles .sf-radio-group .controls input[type]:before, #stacks_in_17.sf-styles .sf-radio-group .controls input[type] { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; margin: 0; background: transparent; cursor: pointer; } #stacks_in_17.sf-styles .sf-radio-group .controls input[type]:after, #stacks_in_17.sf-styles .sf-radio-group .controls input[type]:before { pointer-events: none; } #stacks_in_17.sf-styles .sf-radio-group .controls input:checked:after { content: ""; background: transparent; border: 2px solid rgba(31, 125, 193, 1.00); } #stacks_in_17.sf-styles .sf-radio-group .controls input[type]:checked:after, #stacks_in_17.sf-styles .sf-radio-group .controls input[type]:before, #stacks_in_17 .step .sf-radio-group .controls input.hasError[type]:after { border-radius: 4px; } #stacks_in_17.sf-styles .sf-radio-group .controls.sf-button-group label { display: grid; padding: 16px 8px; grid-template-columns: auto; grid-template-rows: min-content; justify-items: center; align-items: center; text-align: center; line-height: 1.1; font-size: 14px; z-index: 1; grid-gap: 8px; user-select: none; } #stacks_in_17.sf-styles .sf-radio-group .controls.sf-button-group label > div img { display: block; } #stacks_in_17.sf-styles .sf-radio-group .controls.sf-button-group label div:empty, #stacks_in_17.sf-styles .sf-radio-group .controls.sf-button-group label div.empty { display: none; } #stacks_in_17.sf-styles .sf-radio-group .controls.sf-button-group .sf-button-wrap { position: relative; justify-content: center; align-items: center; display: flex; } /*! * Datepicker for Bootstrap * * Copyright 2012 Stefan Petre * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:3000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.bootstrap-datetimepicker-widget:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,0.2);position:absolute;top:-7px;left:6px}.bootstrap-datetimepicker-widget:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:7px}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget>ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:100%;font-weight:bold;font-size:1.2em}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;width:20px;height:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#999}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{color:#fff;background-color:#006dcc;background-image:-moz-linear-gradient(top,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(top,#08c,#04c);background-image:-o-linear-gradient(top,#08c,#04c);background-image:linear-gradient(to bottom,#08c,#04c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);border-color:#04c #04c #002a80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#04c;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.bootstrap-datetimepicker-widget td.active:hover,.bootstrap-datetimepicker-widget td.active:hover:hover,.bootstrap-datetimepicker-widget td.active:active,.bootstrap-datetimepicker-widget td.active:hover:active,.bootstrap-datetimepicker-widget td.active.active,.bootstrap-datetimepicker-widget td.active:hover.active,.bootstrap-datetimepicker-widget td.active.disabled,.bootstrap-datetimepicker-widget td.active:hover.disabled,.bootstrap-datetimepicker-widget td.active[disabled],.bootstrap-datetimepicker-widget td.active:hover[disabled]{color:#fff;background-color:#04c;*background-color:#003bb3}.bootstrap-datetimepicker-widget td.active:active,.bootstrap-datetimepicker-widget td.active:hover:active,.bootstrap-datetimepicker-widget td.active.active,.bootstrap-datetimepicker-widget td.active:hover.active{background-color:#039 \9}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:0;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:block;width:47px;height:54px;line-height:54px;float:left;margin:2px;cursor:pointer;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{color:#fff;background-color:#006dcc;background-image:-moz-linear-gradient(top,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(top,#08c,#04c);background-image:-o-linear-gradient(top,#08c,#04c);background-image:linear-gradient(to bottom,#08c,#04c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);border-color:#04c #04c #002a80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#04c;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.bootstrap-datetimepicker-widget td span.active:hover,.bootstrap-datetimepicker-widget td span.active:active,.bootstrap-datetimepicker-widget td span.active.active,.bootstrap-datetimepicker-widget td span.active.disabled,.bootstrap-datetimepicker-widget td span.active[disabled]{color:#fff;background-color:#04c;*background-color:#003bb3}.bootstrap-datetimepicker-widget td span.active:active,.bootstrap-datetimepicker-widget td span.active.active{background-color:#039 \9}.bootstrap-datetimepicker-widget td span.old{color:#999}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:0;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget th.switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:0;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-append.date .add-on i,.input-prepend.date .add-on i{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px} #stacks_in_17.sf-styles .dropdown-menu { position: absolute; top: 100%; z-index: 1000; display: none; float: none; width: 1000px; max-width: 100%; padding: 5px 0; list-style: none; background-color: #ffffff; color: #676767; border-radius: 3px; box-shadow: 0px 8px 16px rgba(0,0,0,0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } #stacks_in_17.sf-styles .bootstrap-datetimepicker-widget:before, #stacks_in_17.sf-styles .bootstrap-datetimepicker-widget:after { display: none; } #stacks_in_17.sf-styles .bootstrap-datetimepicker-widget ul { padding: 0px 8px; } #stacks_in_17.sf-styles .bootstrap-datetimepicker-widget td [data-action="togglePicker"] span { display: block; width: auto; height: auto; line-height: 22px; float: none; margin: 0; padding: 8px; border-radius: 0px; } #stacks_in_17.sf-styles .bootstrap-datetimepicker-widget td [data-action="togglePicker"] { display: block; width: 100%; border: 1px solid rgba(0,0,0,0.1); padding: 0px; margin: 8px 0; } #stacks_in_17.sf-styles .bootstrap-datetimepicker-widget .datepicker { margin-top: 8px; } #stacks_in_17.sf-styles .bootstrap-datetimepicker-widget .timepicker { margin-bottom: 8px; } #stacks_in_17.sf-styles table { max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; } #stacks_in_17.sf-styles .bootstrap-datetimepicker-widget .collapse.in { display: block; } #stacks_in_17.sf-styles .bootstrap-datetimepicker-widget .collapse { position: relative; display: none; overflow: visible; } #stacks_in_17.sf-styles .bootstrap-datetimepicker-widget .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 16px; font-weight: 400; line-height: 1.2; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; } #stacks_in_17.sf-styles .hiddenFormSubmit { display: none; } #stacks_in_17.sf-styles .hideSlice { display: none !important; } #stacks_in_17 .autoreply {display: none;} #stacks_in_17 .sf-debug-output.has-output > div { padding: 16px; background: #fff; color: #555 !important; font-size: 16px; line-height: 1.3 !important; max-width: 540px; margin: 16px auto; border: 1px solid rgba(0,0,0,0.15); border-radius: 2px; } #stacks_in_17 .sf-debug-output.has-output h2, #stacks_in_17 .sf-debug-output.has-output h3 { margin: 16px 0px 24px 0px; font-size: 20px; font-weight: bold; color: #333 !important; } #stacks_in_17 .sf-debug-output.has-output h3 { font-size: 18px; } #stacks_in_17 .sf-debug-output.has-output p { margin: 16px 0px; } #stacks_in_17.sf-styles .step-stack-wrap .controls .sf-number-wrap { border-width: 0px; } #stacks_in_17 .step-stack-wrap .controls.sf-input { display: grid; } #stacks_in_17.sf-styles form .step-stack-wrap .note { color: inherit; } #stacks_in_17.sf-styles .step-stack-wrap .steps .step-content { z-index: 3; } /* */ #stacks_in_17 .step-stack-wrap .step-slice { display: none; } #stacks_in_17 .step-stack-wrap .step-submit ~ .step .step-slice { display: block; } /* */ /* */ /* */ textarea#input-stacks_in_24 { height: 200px; resize: none; /* */ } /* */ #sf-radio-stacks_in_24.controls.sf-button-group { width: 120px; } #sf-radio-stacks_in_24.controls.sf-button-group.sf-help-text { width: inherit; } /* */ /* */ textarea#input-stacks_in_41 { height: 200px; resize: none; /* */ } /* */ #sf-radio-stacks_in_41.controls.sf-button-group { width: 120px; } #sf-radio-stacks_in_41.controls.sf-button-group.sf-help-text { width: inherit; } /* */ /* */ textarea#input-stacks_in_26 { height: 200px; resize: none; /* */ } /* */ #sf-radio-stacks_in_26.controls.sf-button-group { width: 120px; } #sf-radio-stacks_in_26.controls.sf-button-group.sf-help-text { width: inherit; } /* */ /* */ textarea#input-stacks_in_48 { height: 200px; resize: none; /* */ } /* */ #sf-radio-stacks_in_48.controls.sf-button-group { width: 120px; } #sf-radio-stacks_in_48.controls.sf-button-group.sf-help-text { width: inherit; } /* */ /* */ textarea#input-stacks_in_25 { height: 200px; resize: none; /* */ } /* */ #sf-radio-stacks_in_25.controls.sf-button-group { width: 120px; } #sf-radio-stacks_in_25.controls.sf-button-group.sf-help-text { width: inherit; } /* */ /* */ textarea#input-stacks_in_27 { height: 100px; resize: none; /* */ } /* */ #sf-radio-stacks_in_27.controls.sf-button-group { width: 120px; } #sf-radio-stacks_in_27.controls.sf-button-group.sf-help-text { width: inherit; } /* */ /* */ #submit-stacks_in_28 { margin-left: auto; justify-content: flex-end; } /* */ textarea#input-stacks_in_28 { height: 200px; resize: none; /* */ } /* */ #sf-radio-stacks_in_28.controls.sf-button-group { width: 120px; } #sf-radio-stacks_in_28.controls.sf-button-group.sf-help-text { width: inherit; } /* */ /* 1.0.2 */ #steps-stacks_in_29, #steps-stacks_in_29 .com_onelittledesigner_stacks_Step_2_Item_stack { max-width: 800px; width: 100%; border-radius: 2px; min-height: 450px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; overflow: hidden; position: relative; transition: all 300ms ease; } #steps-stacks_in_29 { margin: 16px auto 16px auto; } #steps-stacks_in_29 svg { color: inherit; fill: inherit; stroke: inherit; } #steps-stacks_in_29 .step-list { width: 230px; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; /* */ background: rgba(14, 27, 37, 1.00); /* */ /* */ /* */ /* */ } #steps-stacks_in_29 .step-list::before { /* */ display: none; /* */ top: 0; left: 0; content: ''; width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, 0.20); } #steps-stacks_in_29 .steps { background-color: rgba(243, 243, 243, 1.00); -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } #steps-stacks_in_29 .steps .step { /* */ background: rgba(243, 243, 243, 1.00); /* */ /* */ /* */ /* */ } #steps-stacks_in_29 .steps .step::before { /* */ display: none; /* */ top: 0; left: 0; content: ''; width: 100%; height: 100%; pointer-events: none; position: absolute; background: rgba(0, 0, 0, 0.20); } #steps-stacks_in_29.bold-sidebar-text .step-list ul li { font-weight: bold; } #steps-stacks_in_29.show-step-list .steps .step-top .step-list-toggle svg { color: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29.show-step-list .step-list { margin-left: 0; } #steps-stacks_in_29.show-step-list .step-list ul { opacity: 1; transition: all 300ms 300ms; } #steps-stacks_in_29.complete .step-complete-page { opacity: 1; visibility: visible; pointer-events: auto; } #steps-stacks_in_29 .step-complete-page { /* */ background: rgba(14, 27, 37, 1.00); /* */ /* */ /* */ /* */ top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 20; padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; visibility: hidden; text-align: center; position: absolute; -webkit-box-align: center; -ms-flex-align: center; align-items: center; pointer-events: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; transition: all 300ms ease; } #steps-stacks_in_29 .step-complete-icon { z-index: 10; position: relative; color: rgba(47, 205, 113, 1.00); width: 100px; height: 100px; margin-bottom: 10px; } #steps-stacks_in_29 .step-complete-title { z-index: 10; position: relative; font-family: inherit; color: rgba(255, 255, 255, 1.00); font-size: 32px; line-height: calc(32px * 1.1); margin-bottom: 10px; } #steps-stacks_in_29 .step-complete-description { z-index: 10; position: relative; font-family: inherit; font-size: 16px; line-height: calc(16px * 1.4); margin-bottom: 20px; color: rgba(255, 255, 255, 0.40); max-width: calc(800px - 230px); min-width: 300px; } #steps-stacks_in_29 .step-complete-restart { z-index: 10; position: relative; color: rgba(255, 255, 255, 1.00); background: rgba(255, 255, 255, 0.10); font-size: 24px; padding: 10px 20px; border-radius: 2px; min-width: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #steps-stacks_in_29 .step-complete-restart svg { height: 24px; transition: all 0.5s; } #steps-stacks_in_29 .step-complete-restart:hover svg { -webkit-transform: rotate(360deg); transform: rotate(360deg); } #steps-stacks_in_29 .step-complete-page::before { /* */ display: none; /* */ top: 0; left: 0; content: ''; width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, 0.20); } #steps-stacks_in_29 .step-list { margin-left: -230px; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; transition: all 300ms ease; } #steps-stacks_in_29 .step-list * { box-sizing: border-box; } #steps-stacks_in_29 .step-list-nav { z-index: 10; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; display: none; font-size: 24px; padding: 15px 20px 0px 25px; position: relative; align-items: center; color: rgba(255, 255, 255, 1.00); min-height: 20px; justify-content: flex-start; } #steps-stacks_in_29 .steps .step-top .step-list-toggle, #steps-stacks_in_29 .step-list-nav .step-list-toggle { cursor: pointer; } #steps-stacks_in_29 .step-list ul { z-index: 10; opacity: 0; padding: 10px; margin: auto 0; list-style: none; position: relative; transition: all 0s 0s; } #steps-stacks_in_29 .step-list ul li { font-family: inherit; color: rgba(255, 255, 255, 0.50); font-size: 14px; line-height: 15.400001px; padding: 0; margin: 8px 16px; display: grid; cursor: pointer; grid-template-columns: min-content 1fr; align-items: center; } #steps-stacks_in_29 .step-list ul li:hover { color: rgba(255, 255, 255, 1.00); } #steps-stacks_in_29 .step-list ul li.active { color: rgba(255, 255, 255, 1.00); } #steps-stacks_in_29 .step-list ul li.step-inactive { opacity: 0.5; pointer-events: none; } #steps-stacks_in_29 .step-list ul li.step-inactive.step-complete { display: flex; } #steps-stacks_in_29 .steps .step .step-hide, #steps-stacks_in_29 .step-list ul li.step-hide, #steps-stacks_in_29 .step-list ul li.step-complete.step-hide { display: none; } #steps-stacks_in_29 .step-list ul li .step-is-inactive, #steps-stacks_in_29 .step-list ul li .step-is-complete, #steps-stacks_in_29 .step-list ul li .step-is-incomplete { display: none; height: 21.000000px; width: 21.000000px; margin-right: 4px; } #steps-stacks_in_29 .step-list ul li.is-last-step svg circle, #steps-stacks_in_29 .step-list ul li svg.step-is-inactive circle { transform: scale(0.25); transform-origin: center; fill: currentColor; } #steps-stacks_in_29 .step-list ul li .step-is-complete { color: #2FCD71; } #steps-stacks_in_29 .step-list ul li .step-is-incomplete { color: #F9D949; } #steps-stacks_in_29 .steps .step .controls input:not([type="radio"]):not([type="checkbox"]):not([type="number"]).hasError, #steps-stacks_in_29 .steps .step .controls input[type="number"].hasError+input, #steps-stacks_in_29 .steps .step .controls input.sf-upload+label, #steps-stacks_in_29 .steps .step .controls textarea.hasError, #steps-stacks_in_29 .steps .step .controls button.hasError, #steps-stacks_in_29 .steps .step .controls select.hasError, #steps-stacks_in_29 .steps .step input[type="checkbox"].hasError+.sf-captcha>.g-recaptcha iframe { box-shadow: inset 0 0 0 1000px #F9D94955; } #steps-stacks_in_29 .steps .step .controls input[type="checkbox"]:not(:checked).hasError:after, #steps-stacks_in_29 .steps .step .controls input[type="radio"]:not(:checked).hasError:after { z-index: 2; pointer-events: none; background-color: #F9D94955; } #steps-stacks_in_29 .step-list ul li:not(.step-complete):not(.step-incomplete) .step-is-inactive, #steps-stacks_in_29 .step-list ul li.step-inactive:not(.step-complete) .step-is-inactive, #steps-stacks_in_29 .step-list ul li.step-complete .step-is-complete, #steps-stacks_in_29 .step-list ul li.step-incomplete .step-is-incomplete { display: inline-block; } #steps-stacks_in_29>.step-message.sf-message { user-select: none; display: grid; grid-template-columns: 48px 1fr; grid-gap: 16px; justify-content: center; align-items: center; position: absolute; z-index: 99; top: 16px; right: 16px; left: auto; bottom: auto; cursor: pointer; padding: 0px; box-shadow: none; max-width: 360px; border-radius: 2px; /* */ background: rgba(255, 255, 255, 1.00); box-shadow: inset 0 0 0 1px rgba(218, 218, 218, 1.00); /* */ /* */ /* */ /* */ } #steps-stacks_in_29>.step-message.sf-message:has(.submitMessage) { animation: step-message-in-out 4s ease forwards; } @keyframes step-message-in-out { 0% { transform: translateY(-50px); opacity: 0 } 5% { transform: translateY(0); opacity: 1 } 95% { transform: translateY(0); opacity: 1 } 100% { transform: translateY(-50px); opacity: 0 } } #steps-stacks_in_29>.step-message>svg { height: 32px; width: 32px; margin: 16px 0px 16px 16px; color: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29>.step-message>svg:last-child { display: none; } #steps-stacks_in_29>.step-message>.submitMessage { border: 0px solid black; box-shadow: none; background: transparent; position: static; margin: 0; animation: none; padding: 16px 16px 16px 0px; transform: translate(0, 0); } #steps-stacks_in_29>.step-message>.submitMessage h3 { color: rgba(14, 27, 37, 1.00); font-size: 17.500000px; line-height: 21.000000px; margin: 0 0 16px 0; } #steps-stacks_in_29>.step-message>.submitMessage p { color: rgba(0, 0, 0, 0.75); font-size: 14px; line-height: 21.000000px; margin: 0; } #steps-stacks_in_29 .steps { position: relative; padding-bottom: 57px; } #steps-stacks_in_29 .steps .step { min-height: 450px; top: 0; left: 0; z-index: 1; width: 100%; text-align: left; position: absolute; -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: transform 300ms ease; display: grid; grid-template-rows: min-content 1fr 57px; } #steps-stacks_in_29 .steps .step:after { content: ""; } #steps-stacks_in_29 .steps .step.active { -webkit-transform: translateY(0%); transform: translateY(0%); } #steps-stacks_in_29 .steps .step-top { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; padding: 15px 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; background-color: rgba(243, 243, 243, 1.00); z-index: 2; } #steps-stacks_in_29.has-show-count .steps .step .step-top { padding: 10px 20px; } #steps-stacks_in_29 .step-list-nav svg.step-list-toggle, #steps-stacks_in_29 .steps .step-top .step-list-toggle svg { height: 24px; cursor: pointer; display: block; margin: 8px 0px; } #steps-stacks_in_29 .steps .step-top .step-list-toggle * { pointer-events: none; } #steps-stacks_in_29 .steps .step-top .step-list-toggle svg { color: rgba(0, 0, 0, 0.50); margin-left: -2px; } #steps-stacks_in_29 .steps .step-top .step-count { font-family: inherit; color: rgba(14, 27, 37, 1.00); display: flex; flex: 0 1 auto; line-height: 1; font-weight: bold; margin-left: auto; align-items: center; box-sizing: border-box; } #steps-stacks_in_29 .steps .step-top .step-count::before { color: rgba(0, 0, 0, 0.50); margin-right: 10px; display: inline-block; } #steps-stacks_in_29 .steps .step-content { font-family: inherit; display: grid; align-content: flex-start; padding: 15px 30px 15px 30px; padding-top: calc(15px - 18px); padding-bottom: calc(15px - 10px); z-index: 1; color: rgba(0, 0, 0, 0.75); position: relative; } #steps-stacks_in_29 .steps .step-content>.empty { display: none; } #steps-stacks_in_29 .steps .step-content .step-title, #steps-stacks_in_29 .steps .step-content h1, #steps-stacks_in_29 .steps .step-content h2, #steps-stacks_in_29 .steps .step-content h3, #steps-stacks_in_29 .steps .step-content h4, #steps-stacks_in_29 .steps .step-content h5, #steps-stacks_in_29 .steps .step-content h6 { font-family: inherit; color: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29 .steps:not(.custom-formatting) .step-content p { color: rgba(0, 0, 0, 0.75); } #steps-stacks_in_29 .steps:not(.custom-formatting) .step-content h2, #steps-stacks_in_29 .steps:not(.custom-formatting) .step-content .step-title { font-weight: bold; font-size: 32px; line-height: calc(32px * 1.1); margin: 10px 0 0px 0; } #steps-stacks_in_29 .steps:not(.custom-formatting) .step-content .step-slice>h2:first-child, #steps-stacks_in_29 .steps:not(.custom-formatting) .step-content .step-title { margin-top: 0px; } #steps-stacks_in_29 .steps:not(.custom-formatting) .step-content .step-slice>*:last-child { margin-bottom: 0px; } #steps-stacks_in_29 .steps:not(.custom-formatting) .step-content h3 { font-weight: bold; font-size: 14px; line-height: calc(14px * 1.1); margin: 10px 0 10px 0; } #steps-stacks_in_29 .steps:not(.custom-formatting) .step-content h2+h3 { font-weight: normal; font-size: calc(14px * 1.1); line-height: calc(14px * 1.1); color: rgba(0, 0, 0, 0.75); margin: 0px 0 10px 0; opacity: 0.66; } #steps-stacks_in_29 .steps:not(.custom-formatting) .step-content { font-size: 14px; line-height: calc(14px * 1.6); } #steps-stacks_in_29 .steps:not(.custom-formatting) .step-content p { margin: 10px 0; } #steps-stacks_in_29 .steps .step-content a, #steps-stacks_in_29 .steps .step-content a:visited { color: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29 .step-nav { font-family: inherit; left: 0; right: 0; bottom: 0; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; padding: 10px; background: rgba(243, 243, 243, 1.00); margin-top: auto; position: absolute; align-items: center; box-sizing: border-box; justify-content: space-between; transition: all 300ms ease; } #steps-stacks_in_29 .sf-file.controls .fileUpload span { font-size: inherit; line-height: inherit; height: auto; color: inherit; } #steps-stacks_in_29 .sf-file.controls .fileUpload, #steps-stacks_in_29 .step-nav-next, #steps-stacks_in_29 .step-nav-prev { user-select: none; background-color: transparent; font-size: 14px; padding: 10px 20px; border-radius: 2px; display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; cursor: pointer; align-items: center; justify-content: center; color: rgba(255, 255, 255, 1.00); border: 2px solid rgba(14, 27, 37, 1.00); transition: all 300ms ease; } #steps-stacks_in_29 .sf-file.controls .fileUpload:hover, #steps-stacks_in_29 .step-nav-next:hover, #steps-stacks_in_29 .step-nav-prev:hover { color: rgba(255, 255, 255, 1.00); background: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29 .sf-file.controls .fileUpload, #steps-stacks_in_29 .step-nav-next { color: rgba(255, 255, 255, 1.00); background: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29 .step-nav-next::before { content: "Next"; display: inline; } #steps-stacks_in_29 .step-nav-prev { color: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29 .step-nav-prev::before { display: inline; content: "Back"; } #steps-stacks_in_29 .step-nav.last-step .step-nav-next::before { content: "Complete"; } #steps-stacks_in_29>div>div[tag="slice"]:nth-last-child(2) .step-nav-next, #steps-stacks_in_29 .step-nav.last-step .step-nav-next { opacity: 0; pointer-events: none; } #steps-stacks_in_29 .step-post-submit.active+.step-nav .step-nav-prev, #steps-stacks_in_29 .step-post-submit.active+div:not(.active)~.step-nav .step-nav-prev, #steps-stacks_in_29 .step-nav.first-step .step-nav-prev { opacity: 0; visibility: hidden; pointer-events: none !important; } #steps-stacks_in_29.sf-submitting { pointer-events: none; } #steps-stacks_in_29.sf-submitting .step-nav>div { pointer-events: none; filter: grayscale(1); opacity: 0.5; } @media (max-width: 600px) { #steps-stacks_in_29.show-step-list .step-list { margin-left: 0; -webkit-transform: translateX(0%); transform: translateX(0%); } #steps-stacks_in_29 .steps { z-index: 1; position: relative; } #steps-stacks_in_29.show-step-list .steps .step-nav-next, #steps-stacks_in_29.show-step-list .steps .step-nav-prev { pointer-events: none; } #steps-stacks_in_29 .step-list { top: 0; left: 0; bottom: 0; z-index: 2; height: auto; margin-left: -230px; position: absolute; align-items: flex-start; -webkit-transform: translateX(-100%); transform: translateX(-100%); } #steps-stacks_in_29 .step-list ul { margin: 0; } #steps-stacks_in_29 .step-list-nav { display: flex; } } #steps-stacks_in_29 .sf-submit { margin: 0 !important; } /* Field CSS */ #steps-stacks_in_29 * { box-sizing: border-box; } #steps-stacks_in_29 .note { display: block; font-size: 75%; line-height: 1.2; color: inherit; margin: 0px 8px; opacity: 0.6; } #steps-stacks_in_29 .note p { margin: 0; } #steps-stacks_in_29 .controls { position: relative; margin: 10px 0px; width: 300px; max-width: 100%; display: grid; grid-template-columns: 1fr; align-items: center; align-content: flex-start; grid-gap: 4px 8px; } #steps-stacks_in_29 .controls.sf-checkbox { grid-template-columns: 22px 1fr; grid-gap: 0px 8px; } #steps-stacks_in_29 .controls.sf-radio { margin-top: 4px; margin-bottom: 4px; } #steps-stacks_in_29 .controls.sf-radio+.controls:not(.sf-radio) { margin-top: 16px; } #steps-stacks_in_29 .deluxe-columns>div { min-width: 0; } #steps-stacks_in_29 .form-group>div:nth-child(2) { margin-top: 16px; } #steps-stacks_in_29 .controls.sf-checkbox label { cursor: pointer; } #steps-stacks_in_29 .step .controls label { font-size: 14px; padding: 0px; line-height: 1; color: inherit; margin: 0; color: rgba(0, 0, 0, 0.75); } #steps-stacks_in_29 .step .controls:not(.sf-checkbox) label { font-weight: bold; pointer-events: none; color: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29 .controls .field-icon { position: absolute; right: 8px; top: 15px; margin-top: 16px; fill: currentColor; width: 16px; height: 16px; pointer-events: none; opacity: 1; z-index: 1; } #steps-stacks_in_29.sf-no-help-text .controls .field-icon { right: 8px; } #steps-stacks_in_29 .controls { font-size: 14px; } #steps-stacks_in_29 .controls input, #steps-stacks_in_29 .controls select { font-size: 14px; line-height: 14px; height: 34px; color: inherit; } #steps-stacks_in_29 .controls input:focus, #steps-stacks_in_29 .controls select:focus { outline: none; } #steps-stacks_in_29 .controls.sf-checkbox label { font-size: 14px; line-height: 14px; } #steps-stacks_in_29 .controls select.is-placeholder option { opacity: 0.6; } #steps-stacks_in_29 .controls input::placeholder, #steps-stacks_in_29 .controls select.is-placeholder option[disabled] { opacity: 0.6; } #steps-stacks_in_29 .step .controls input, #steps-stacks_in_29 .step .controls select { padding: 8px 8px; width: 100%; margin: 0px; color: rgba(0, 0, 0, 0.75); border-radius: 2px; position: relative; border: 1px solid transparent; background: transparent; } #steps-stacks_in_29 .step .controls textarea { border: 1px solid rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.75); background: rgba(0, 0, 0, 0.00); border-radius: 2px; } #steps-stacks_in_29 .step .controls .sf-number-wrap, #steps-stacks_in_29 .step .controls .step-input-wrap { position: relative; } #steps-stacks_in_29 .step .controls .sf-number-wrap:before, #steps-stacks_in_29 .step .controls .step-input-wrap:before { content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.00); line-height: 20px; text-align: center; left: 0px; } #steps-stacks_in_29 .step .controls input[type="checkbox"], #steps-stacks_in_29 .step .controls input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; } #steps-stacks_in_29 .step .controls select { line-height: 20px; padding: 6px 8px; } #steps-stacks_in_29 .step .controls.sf-checkbox .note, #steps-stacks_in_29 .step .controls.sf-file .note { grid-column: span 2; } #steps-stacks_in_29 .step .controls input, #steps-stacks_in_29 .step .controls select, #steps-stacks_in_29 .step .controls input[type="checkbox"]:after, #steps-stacks_in_29 .step .controls input[type="radio"]:after { box-shadow: none; } #steps-stacks_in_29 .step .controls input[type="checkbox"]:not(:checked).hasError:after, #steps-stacks_in_29 .step .controls input[type="radio"]:not(:checked).hasError:after { box-shadow: none; content: ""; bottom: 1px; right: 1px; position: absolute; left: 1px; top: 1px; width: auto; height: auto; border-radius: 50%; } #steps-stacks_in_29 .step .controls input[type="checkbox"]:not(:checked).hasError:after { border-radius: 2px; } #steps-stacks_in_29 .step .controls select { cursor: pointer; -moz-appearance: none; -webkit-appearance: none; } #steps-stacks_in_29 .step .controls input[type=checkbox], #steps-stacks_in_29 .step .controls input[type=radio] { position: relative; left: 0px; width: 22px; height: 22px; margin: 4px 0px; background: transparent; border-color: transparent; } #steps-stacks_in_29 .step .controls input[type=checkbox]:after, #steps-stacks_in_29 .step .controls input[type=checkbox]:before, #steps-stacks_in_29 .step .controls input[type=radio]:before { cursor: pointer; content: " "; display: inline-block; width: 20px; height: 20px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.00); line-height: 20px; text-align: center; position: relative; left: 0px; box-sizing: border-box; } #steps-stacks_in_29 .step .controls input[type=checkbox]:after { background: transparent; border: 0px solid transparent; opacity: 1; position: absolute; top: 1px; left: 1px; bottom: 1px; right: 1px; color: rgba(0, 0, 0, 0.75); } #steps-stacks_in_29 .step .controls input[type=checkbox]:checked:after { content: "\2714"; color: rgba(0, 0, 0, 0.75); font-size: 14px; font-weight: normal; font-family: Arial; } #steps-stacks_in_29 .step .controls input[type="number"]+input[type="text"] { position: absolute; left: 0; top: 0; bottom: 0; right: 0; pointer-events: none; color: transparent !important; background: transparent !important; } #steps-stacks_in_29 .step .controls input[type="number"]:focus+input[type="text"] { color: transparent; pointer-events: none; } #steps-stacks_in_29 .step .controls .sf-number-wrap, #steps-stacks_in_29 .step .controls .step-number-wrap { display: grid; grid-template-columns: 1fr min-content; align-items: center; grid-gap: 0px; } #steps-stacks_in_29 .step .controls input::-webkit-outer-spin-button, #steps-stacks_in_29 .step .controls input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #steps-stacks_in_29 .step .controls input[type=number] { -moz-appearance: textfield; } #steps-stacks_in_29 .quantity-nav { height: 24px; display: grid; grid-gap: 2px; margin-left: 8px; margin-right: 4px; grid-template-columns: 1fr 1fr; } #steps-stacks_in_29 .quantity-button { font-family: "helvetica-Neue", helvetica; font-weight: 400; position: relative; cursor: pointer; border: none; width: 24px; text-align: center; font-size: 14px; line-height: 22px; height: 24px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; background-color: rgba(0, 0, 0, 0.05); color: inherit; } #steps-stacks_in_29 .quantity-button.quantity-up:before { content: "+"; } #steps-stacks_in_29 .quantity-button.quantity-down:before { content: "-"; } #steps-stacks_in_29 .quantity-button:active:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.05); pointer-events: none; } #steps-stacks_in_29 .form-group>div:nth-child(2) { margin-top: 16px; } #steps-stacks_in_29 .step .controls.sf-checkbox label { cursor: pointer; } #steps-stacks_in_29 .step .controls label { padding: 0px; margin: 0; color: rgba(0, 0, 0, 0.75); } #steps-stacks_in_29 .step .controls:not(.sf-checkbox) label { font-weight: bold; pointer-events: none; color: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29 .step .controls .field-icon { fill: currentColor; opacity: 1; z-index: 1; } #steps-stacks_in_29 .sf-no-help-text .controls .field-icon { right: 8px; } #steps-stacks_in_29 .controls .step-input-wrap input::placeholder, .sf-placeholder #steps-stacks_in_29 .controls .step-input-wrap select:invalid, #steps-stacks_in_29 .controls .step-input-wrap input::placeholder, #steps-stacks_in_29 .controls .step-input-wrap select.is-placeholder, #steps-stacks_in_29 .controls .step-input-wrap select.is-placeholder option { color: rgba(0, 0, 0, 0.25); } #steps-stacks_in_29 .step .controls input, #steps-stacks_in_29 .step .controls select { margin: 0px; position: relative; } #steps-stacks_in_29 .step .controls .sf-number-wrap, #steps-stacks_in_29 .step .controls .step-input-wrap { position: relative; } #steps-stacks_in_29 .step .controls .sf-number-wrap:before, #steps-stacks_in_29 .step .controls .step-input-wrap:before { content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.00); line-height: 20px; text-align: center; left: 0px; } #steps-stacks_in_29 .step .controls.sf-checkbox .note, #steps-stacks_in_29 .step .controls.sf-file .note { grid-column: span 2; } #steps-stacks_in_29 .step .controls input, #steps-stacks_in_29 .step .controls select, #steps-stacks_in_29 .step .controls input[type="checkbox"]:after, #steps-stacks_in_29 .step .controls input[type="radio"]:after { box-shadow: none; } #steps-stacks_in_29 .step .controls input[type=checkbox], #steps-stacks_in_29 .step .controls input[type=radio] { position: relative; background: transparent; border-color: transparent; } #steps-stacks_in_29 .step .controls input[type=checkbox]:after { background: transparent; border: 1px solid transparent; opacity: 1; position: absolute; top: 0; left: 0; color: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29 .step .controls input[type=checkbox]:checked:after { content: "\2714"; color: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29 .step .controls input[type=radio]:checked:after { background-color: rgba(14, 27, 37, 1.00); } .sf-classic #steps-stacks_in_29 .controls.sf-checkbox label { display: block; } .sf-classic #steps-stacks_in_29 .controls:not(.sf-checkbox) label.sf-active { top: -8px; z-index: 2; background-color: rgba(0, 0, 0, 0.00); } #steps-stacks_in_29 .step .controls input[type=radio]:before { border-radius: 50%; } #steps-stacks_in_29 .step .controls input[type=radio]:checked:after { content: ""; width: 12px; height: 12px; position: absolute; left: 4px; top: 4px; border-radius: 50%; background-color: rgba(14, 27, 37, 1.00); } #steps-stacks_in_29 .sf-radio-group { display: flex; flex-wrap: wrap; align-items: stretch; grid-gap: 4px; } #steps-stacks_in_29 .sf-radio-group .controls.sf-button-group { flex: 0 0 auto; margin: 0 0 4px 0; padding: 16px 8px; display: flex; align-items: stretch; justify-content: center; } #steps-stacks_in_29 .sf-radio-group .controls input[type]:checked:after, #steps-stacks_in_29 .sf-radio-group .controls input[type]:before, #steps-stacks_in_29 .sf-radio-group .controls input[type] { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; margin: 0; background: transparent; } #steps-stacks_in_29 .sf-radio-group .controls input[type]:checked:after { background: transparent; border: 2px solid rgba(14, 27, 37, 1.00); } #steps-stacks_in_29 .sf-radio-group .controls input[type]:checked:after, #steps-stacks_in_29 .sf-radio-group .controls input[type]:before, #steps-stacks_in_29 .step .sf-radio-group .controls input.hasError[type]:after { border-radius: 4px; } #steps-stacks_in_29 .sf-radio-group .controls.sf-button-group label { display: grid; grid-template-columns: auto; grid-template-rows: min-content; justify-items: center; align-items: center; text-align: center; line-height: 1.1; font-size: 12px; grid-gap: 8px; z-index: 1; user-select: none; } #steps-stacks_in_29 .sf-radio-group .controls.sf-button-group label div:empty, #steps-stacks_in_29 .sf-radio-group .controls.sf-button-group label div.empty { display: none; } /* */ #step-stacks_in_31[data-cond1a] .step-submit-info.error-1ld.has-cond, #step-stacks_in_31[data-cond1b] .step-submit-info.error-1ld.has-cond, #step-stacks_in_31[data-cond1c] .step-submit-info.error-1ld.has-cond, #step-stacks_in_31[data-cond2a] .step-submit-info.error-1ld.has-cond, #step-stacks_in_31[data-cond2b] .step-submit-info.error-1ld.has-cond, #step-stacks_in_31[data-cond2c] .step-submit-info.error-1ld.has-cond, #step-stacks_in_31[data-cond3a] .step-submit-info.error-1ld.has-cond, #step-stacks_in_31[data-cond3b] .step-submit-info.error-1ld.has-cond, #step-stacks_in_31[data-cond3c] .step-submit-info.error-1ld.has-cond { display: grid; } #step-stacks_in_31 .step-top .step-count { display: none; } /* */ #sf-radio-stacks_in_33.controls.sf-button-group { width: 120px; } /* */ #stacks_in_49 { background-color: rgba(255, 255, 255, 1.00); padding: 20px 20px 40px 20px; } #stacks_in_150{visibility:hidden} #stacks_in_151>.s3_row { margin: 0 -0px; } #stacks_in_151>.s3_row>.s3_column_left { width: 30.00%; } #stacks_in_151>.s3_row>.s3_column_center { width: 40.000000%; } #stacks_in_151>.s3_row>.s3_column_right { width: 30.00%; } #stacks_in_151>.s3_row>.s3_column { padding: 0 0px; } @media only screen and (max-width: 770px) { } @media only screen and (max-width: 400px) { #stacks_in_151>.s3_row { margin: -0px 0; } #stacks_in_151>.s3_row>.s3_column { padding: 0px 0; width:100%; } } #stacks_in_166 { padding: 20px 0px 0px 0px; } #stacks_out_166 { width: 150px; margin-left:0; } #stacks_in_153 { padding: 0px 0px 0px 40px; } #stacks_in_155 { margin: 20px 0px 15px 0px; } /* SocialDock – each.css */ /* ===== Basis & Variablen ===== */ .socialdock { --sd-gutter: 8px; --sd-radius: 8px; --sd-pad-y: 8px; --sd-pad-x: 10px; --sd-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; position: relative; display: block; font-family: var(--sd-font); line-height: 1; } /* ===== Layout Container ===== */ .socialdock .socialdock-inner { display: flex; width: 100%; flex-wrap: wrap; gap: var(--sd-gutter); justify-content: flex-start; /* default */ } .socialdock[data-align="center"] .socialdock-inner { justify-content: center; } .socialdock[data-align="right"] .socialdock-inner { justify-content: flex-end; } .socialdock[data-align="between"] .socialdock-inner { justify-content: space-between; } .socialdock[data-align="around"] .socialdock-inner { justify-content: space-around; } .socialdock[data-align="evenly"] .socialdock-inner { justify-content: space-evenly; } /* ===== Stacked-Mode ===== */ .socialdock[data-stacked="true"] .socialdock-inner { flex-direction: column; } .socialdock[data-stacked="true"][data-fullwidth="true"] .socialdock-inner { align-items: stretch; } .socialdock[data-stacked="true"][data-fullwidth="true"] .sd-btn { width: 100%; max-width: 100%; box-sizing: border-box; } /* Stacked + nicht Fullwidth: horizontal per align-items */ .socialdock[data-stacked="true"]:not([data-fullwidth="true"]) .socialdock-inner { align-items: flex-start; } .socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="center"] .socialdock-inner { align-items: center; } .socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="right"] .socialdock-inner { align-items: flex-end; } .socialdock[data-stacked="true"] .sd-btn { align-self: auto !important; } /* ===== Buttons ===== */ .socialdock .sd-btn { width: var(--sd-btn-w, auto); /* equalWidth via JS */ display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border-width: var(--sd-border-w, 1px); border-style: var(--sd-border-style, solid); border-color: var(--sd-border-color, currentColor); border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px))); padding: var(--sd-pad-y, var(--sr-pad-y, var(--sd-pad-y-default, 8px))) var(--sd-pad-x, var(--sr-pad-x, var(--sd-pad-x-default, 10px))); transition: transform .08s ease, opacity .2s ease; font-weight: 600; white-space: nowrap; } .socialdock .sd-btn:focus { outline: 2px solid; outline-offset: 2px; } .socialdock .sd-btn:hover { transform: translateY(-1px); } .socialdock .sd-btn:active { transform: translateY(0); } /* ===== Icons immer perfekt zentriert ===== */ .socialdock .sd-ic { font-size: var(--sd-icon-size, 19px); /* global steuerbar (px) */ width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; /* zentriert SVG im Icon-Container */ } .socialdock .sd-ic svg { width: 1em; height: 1em; display: block; overflow: visible; } .socialdock .sd-lb { font-size: var(--sd-label-size, inherit); } /* ===== Labels & Hover-Animation ===== */ /* 1) Labels AUS (robust), wenn KEIN Hoverlabel aktiv ist */ .socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-lb { display: none !important; } .socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn { gap: 0; /* kein Phantomabstand */ justify-content: center; /* Icon mittig */ } /* 2) Hoverlabel aktiv + Labels nicht explizit an */ .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-lb { display: inline-flex !important; /* sichtbar als Flex-Item */ align-items: center; min-width: 0; /* echtes Schrumpfen */ max-width: 0; /* eingefahren */ overflow: hidden; opacity: 0; transform: translateX(-4px) scale(0.98); margin-left: 0; pointer-events: none; transition: max-width .25s ease, opacity .22s ease, transform .25s ease, margin-left .25s ease; } .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn { gap: 0; /* Platz entsteht durch margin-left beim Ausfahren */ justify-content: center; } .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:hover .sd-lb, .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:focus-visible .sd-lb { max-width: var(--sd-hoverlabel-max, 12ch); opacity: 1; transform: none; margin-left: .5em; /* wirkt wie gap */ } /* ===== Größen ===== */ .socialdock[data-size="s"] .sd-btn { font-size: 12px; --sd-pad-y-default: 6px; --sd-pad-x-default: 8px; --sd-radius-default: 8px; } .socialdock[data-size="m"] .sd-btn { font-size: 14px; --sd-pad-y-default: 8px; --sd-pad-x-default: 10px; --sd-radius-default: 8px; } .socialdock[data-size="l"] .sd-btn { font-size: 16px; --sd-pad-y-default: 10px; --sd-pad-x-default: 12px; --sd-radius-default: 12px; } /* ===== Formen ===== */ .socialdock[data-shape="square"] .sd-btn { border-radius: 0px; } .socialdock[data-shape="pill"] .sd-btn { border-radius: 999px; } /* optional, nur zur Klarheit – identisch zur Basis: */ .socialdock[data-shape="rounded"] .sd-btn { border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px))); } /* ===== Theme-Variablen (Light/Dark/Auto) – nur wenn Brand AUS ===== */ .socialdock[data-theme="light"]:not([data-brand]) .sd-btn, .socialdock[data-theme="light"][data-brand="off"] .sd-btn { color: var(--sd-light-fg, #111); background: var(--sd-light-bg, #fff); } .socialdock[data-theme="dark"]:not([data-brand]) .sd-btn, .socialdock[data-theme="dark"][data-brand="off"] .sd-btn { color: var(--sd-dark-fg, #eee); background: var(--sd-dark-bg, #111); } @media (prefers-color-scheme: light) { .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn, .socialdock[data-theme="auto"][data-brand="off"] .sd-btn { color: var(--sd-light-fg, #111); background: var(--sd-light-bg, #fff); } } @media (prefers-color-scheme: dark) { .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn, .socialdock[data-theme="auto"][data-brand="off"] .sd-btn { color: var(--sd-dark-fg, #eee); background: var(--sd-dark-bg, #111); } } /* ===== Brandfarben (pro Service) ===== */ .sd-btn.sd-x { --sd-brand: #000000; } .sd-btn.sd-facebook { --sd-brand: #1877f2; } .sd-btn.sd-linkedin { --sd-brand: #0a66c2; } .sd-btn.sd-whatsapp { --sd-brand: #25d366; } .sd-btn.sd-telegram { --sd-brand: #24a1de; } .sd-btn.sd-pinterest { --sd-brand: #e60023; } .sd-btn.sd-mail { --sd-brand: #6c757d; } .sd-btn.sd-copy { --sd-brand: #6c757d; } .sd-btn.sd-print { --sd-brand: #6c757d; } .sd-btn.sd-webshare { --sd-brand: #6c757d; } .sd-btn.sd-threads { --sd-brand: #000000; } .sd-btn.sd-bluesky { --sd-brand: #1185fe; } .sd-btn.sd-reddit { --sd-brand: #ff4500; } .sd-btn.sd-hn { --sd-brand: #ff6600; } .sd-btn.sd-pocket { --sd-brand: #ef4056; } .sd-btn.sd-flipboard { --sd-brand: #e12828; } .sd-btn.sd-vk { --sd-brand: #4c75a3; } .sd-btn.sd-line { --sd-brand: #00c300; } .sd-btn.sd-weibo { --sd-brand: #e6162d; } .sd-btn.sd-xing { --sd-brand: #026466; } .sd-btn.sd-mastodon { --sd-brand: #6364ff; } .sd-btn.sd-youtube { --sd-brand: #ff0000; } .sd-btn.sd-instagram { --sd-brand: #E1306C; } .sd-btn.sd-tiktok { --sd-brand: #000000; } .sd-btn.sd-github { --sd-brand: #24292e; } .sd-btn.sd-website { --sd-brand: #6c757d; } /* generisch */ .socialdock[data-brand="fg"] .sd-btn { color: var(--sd-brand, currentColor); border-color: var(--sd-brand, currentColor); background: transparent; } .socialdock[data-brand="bg"] .sd-btn { background: var(--sd-brand, #555); border-color: var(--sd-brand, #555); color: #fff; } /* ⬇️ NEU: Per-Button Brand-Style (überschreibt Theme) */ /* Nach deinen Theme-Regeln einfügen */ .socialdock[data-theme] .sd-btn[data-brand="bg"] { background: var(--sd-brand, #555); border-color: var(--sd-brand, #555); color: #fff; } .socialdock[data-theme] .sd-btn[data-brand="fg"] { color: var(--sd-brand, currentColor); border-color: var(--sd-brand, currentColor); background: transparent; } .socialdock[data-brand="fg"] .sd-btn:hover { opacity: .95; } .socialdock[data-brand="fg"] .sd-btn:active { opacity: .9; } .socialdock[data-brand="bg"] .sd-btn:hover { filter: brightness(.97); } .socialdock[data-brand="bg"] .sd-btn:active { filter: brightness(.92); } /* ===== Toast ===== */ .socialdock .socialdock-toast { position: absolute; margin-top: 8px; background: rgba(0, 0, 0, .9); color: #fff; padding: 8px 10px; border-radius: 8px; font-size: 12px; opacity: 0; transform: translateY(-4px); transition: all .18s ease; } .socialdock .socialdock-toast.show { opacity: 1; transform: translateY(0); } /* Basis: Icon-Größe unabhängig vom Label steuern */ .socialdock .sd-ic { /* skaliert NUR das Icon (SVG bleibt 1em innerhalb) */ font-size: var(--sd-icon-size, 19px); width: 1em; height: 1em; } /* ===== Icon-only: kein Hintergrund, kein Rand – Labels bleiben ===== */ .socialdock[data-appearance="true"] .sd-btn { background: transparent !important; --sd-border-w: 0; box-shadow: none !important; padding: var(--sd-icon-pad, 0); /* unsichtbare Klickfläche (0–8px) */ gap: 8px; /* Abstand Icon ↔ Label */ transform: none; } /* Icon im icon-only Modus größer machen */ .socialdock[data-appearance="true"] { --sd-icon-size: 26px; } /* Optional pro Buttongröße feinabstimmen */ .socialdock[data-appearance="true"][data-size="s"] { --sd-icon-size: 17px; } .socialdock[data-appearance="true"][data-size="m"] { --sd-icon-size: 22px; } .socialdock[data-appearance="true"][data-size="l"] { --sd-icon-size: 29px; } /* Fokus sichtbar (A11y) */ .socialdock[data-appearance="true"] .sd-btn:focus { outline: 2px solid currentColor; outline-offset: 2px; } /* Falls im icon-only Modus Brand-Farbe erzwungen werden soll */ .socialdock[data-appearance="true"][data-brand="fg"] .sd-btn { color: var(--sd-brand) !important; } .socialdock[data-appearance="true"][data-brand="bg"] .sd-btn { background: transparent !important; border: 0 !important; /* wahlweise: color: var(--sd-brand) !important; */ } /* 1) SVG darf über den ViewBox-Rand schauen (kein Clipping der Strokes) */ .socialdock .sd-ic svg { overflow: visible; /* verhindert "angeschnittene" Kanten */ display: block; } /* 2) Icon-Flexitem nicht schrumpfen lassen, immer genug Platz geben */ .socialdock .sd-ic { flex: 0 0 auto; /* nicht zusammenquetschen */ min-width: 1em; /* nie kleiner als die Icon-Größe */ min-height: 1em; padding: .08em; /* optischer "Bleed" */ } /* 3) Sicherheitshalber: Buttons haben wirklich kompakte Line-Box */ .socialdock .sd-btn { line-height: 1; } /* 4) Im Icon-only Modus darf das Icon größer sein, ohne Clipping */ .socialdock[data-appearance="true"] { --sd-icon-size: 26px; } .socialdock .sd-ic { font-size: var(--sd-icon-size, 19px); width: 1em; height: 1em; } /* Icon-only Modus: Sicherheits-Inset */ .socialdock[data-appearance="true"]{ --sd-edge-safety: 2px; /* ggf. 1px–3px testen */ padding-inline: var(--sd-edge-safety); overflow-x: clip; } @supports not (overflow-x: clip){ .socialdock[data-appearance="true"]{ overflow-x: hidden; } } /* Monochrome Icons – sicher */ .socialdock .sd-ic svg, .socialdock .sd-ic svg * { fill: currentColor !important; stroke: none !important; } /* Perfekte Kreise, wenn Option aktiv UND Labels komplett aus (kein Hoverlabel) */ .socialdock[data-round-icononly="true"]:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn { /* Kreisgröße: Icon + vertikales Padding */ --sd-circle: calc(var(--sd-icon-size, 19px) + (var(--sd-pad-y) * 2)); /* Equal-Width übersteuern: Breite = Höhe = --sd-circle */ --sd-btn-w: var(--sd-circle); height: var(--sd-circle); /* gleiches Padding auf allen Seiten -> optisch zentriert */ padding: var(--sd-pad-y); border-radius: 50%; gap: 0; /* kein „Phantom“-Abstand */ justify-content: center; } /* Optional: auch im icon-only Erscheinungsbild kreisrund */ .socialdock[data-appearance="true"][data-round-icononly="true"]:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn { border-radius: 50%; } /* Mini-Zeile: edel, freundlich, sehr kompakt */ .sd-item-mini{ --sd-brand:#6c757d; /* Fallback Brand */ --sd-bg:#f6f8fc; /* freundliches Hell */ --sd-bd:#e6ecf5; /* sanfte Linie */ --sd-fg:#243449; /* statt Schwarz: edles Slate */ --sd-badge-bg-share:#eef3ff; --sd-badge-fg-share:#2a5bd7; --sd-badge-bd-share:#e2e9ff; --sd-badge-bg-link:#e8f7f1; --sd-badge-fg-link:#0b7b54; --sd-badge-bd-link:#d6f2e7; display:flex; align-items:center; gap:8px; padding:4px 8px; margin:2px 0; border:0px solid var(--sd-bd); border-radius:4px; background:var(--sd-bg); color:var(--sd-fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; font-size:12px; line-height:1.2; max-width:100%; } .sd-item-mini .sd-dot{ width:8px; height:8px; border-radius:50%; background:var(--sd-brand); flex:0 0 auto; } .sd-item-mini .sd-badge{ font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px; border:1px solid var(--sd-bd); } .sd-item-mini.is-share .sd-badge{ background:var(--sd-badge-bg-share); color:var(--sd-badge-fg-share); border-color:var(--sd-badge-bd-share); } .sd-item-mini.is-link .sd-badge{ background:var(--sd-badge-bg-link); color:var(--sd-badge-fg-link); border-color:var(--sd-badge-bd-link); } .sd-item-mini .sd-text{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; } /* Service-Namen hübsch anzeigen: - wenn kein Label gesetzt ist, erzeugen wir Text via ::after - Standard: capitalize - Ausnahmen (YouTube, Hacker News, LINE, VK, Web Share, etc.) */ .sd-item-mini .sd-svc::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing:.2px; } /* Ausnahmen/Mappings auf echte Markennamen */ .sd-item-mini.sd--youtube .sd-svc::after{ content:"YouTube"; } .sd-item-mini.sd--hn .sd-svc::after{ content:"Hacker News"; } .sd-item-mini.sd--line .sd-svc::after{ content:"LINE"; } .sd-item-mini.sd--vk .sd-svc::after{ content:"VK"; } .sd-item-mini.sd--xing .sd-svc::after{ content:"XING"; } .sd-item-mini.sd--webshare .sd-svc::after{ content:"Web Share"; } .sd-item-mini.sd--x .sd-svc::after{ content:"X"; } /* Dark-Mode (freundlich, nicht pechschwarz) */ @media (prefers-color-scheme: dark){ .sd-item-mini{ --sd-bg:#818c9f; --sd-bd:#243449; --sd-fg:#e7ecf3; --sd-badge-bg-share:#11203f; --sd-badge-fg-share:#9fb6ff; --sd-badge-bd-share:#1a2a4a; --sd-badge-bg-link:#0f221b; --sd-badge-fg-link:#86d6b7; --sd-badge-bd-link:#153428; } } /* Brandfarbe nach Dienst (nur Variable setzen, dezente Dot-Farbe) */ .sd-item-mini.sd--x{--sd-brand:#111} .sd-item-mini.sd--facebook{--sd-brand:#1877f2} .sd-item-mini.sd--linkedin{--sd-brand:#0a66c2} .sd-item-mini.sd--whatsapp{--sd-brand:#25d366} .sd-item-mini.sd--telegram{--sd-brand:#24a1de} .sd-item-mini.sd--pinterest{--sd-brand:#e60023} .sd-item-mini.sd--mail,.sd-item-mini.sd--copy,.sd-item-mini.sd--print,.sd-item-mini.sd--webshare{--sd-brand:#6c757d} .sd-item-mini.sd--threads{--sd-brand:#000} .sd-item-mini.sd--bluesky{--sd-brand:#1185fe} .sd-item-mini.sd--reddit{--sd-brand:#ff4500} .sd-item-mini.sd--hn{--sd-brand:#ff6600} .sd-item-mini.sd--pocket{--sd-brand:#ef4056} .sd-item-mini.sd--flipboard{--sd-brand:#e12828} .sd-item-mini.sd--vk{--sd-brand:#4c75a3} .sd-item-mini.sd--line{--sd-brand:#00c300} .sd-item-mini.sd--weibo{--sd-brand:#e6162d} .sd-item-mini.sd--xing{--sd-brand:#026466} .sd-item-mini.sd--mastodon{--sd-brand:#6364ff} /* Link-Only & generisch */ .sd-item-mini.sd--instagram{--sd-brand:#E1306C} .sd-item-mini.sd--youtube{--sd-brand:#f00} .sd-item-mini.sd--tiktok{--sd-brand:#000} .sd-item-mini.sd--github{--sd-brand:#24292e} .sd-item-mini.sd--website,.sd-item-mini.sd--external{--sd-brand:#6c757d} /* Auto-Label: Service-Namen hübsch darstellen, wenn kein eigenes Label gesetzt ist */ .sd-preview .sd-auto-label::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing: .2px; } /* Ausnahmen für Markennamen */ .sd-preview .sd-btn.sd-youtube .sd-auto-label::after{ content: "YouTube"; } .sd-preview .sd-btn.sd-hn .sd-auto-label::after{ content: "Hacker News"; } .sd-preview .sd-btn.sd-line .sd-auto-label::after{ content: "LINE"; } .sd-preview .sd-btn.sd-vk .sd-auto-label::after{ content: "VK"; } .sd-preview .sd-btn.sd-xing .sd-auto-label::after{ content: "XING"; } .sd-preview .sd-btn.sd-webshare .sd-auto-label::after{ content: "Web Share"; } .sd-preview .sd-btn.sd-x .sd-auto-label::after{ content: "X"; } /* Kompakter machen, damit die Zeile wenig Platz braucht (ohne die Parent-Optik zu brechen) */ .sd-preview .sd-btn{ padding: 6px 10px; /* etwas schlanker */ gap: 6px; /* engerer Abstand Icon/Label */ font-size: 13px; /* kompakt, aber lesbar */ } .sd-preview .sd-ic { font-size: var(--sd-icon-size, 19px); } /* Legenden-Container kompakt lassen */ .sd-edit-inline{ display:flex; align-items:center; gap:8px; max-width:100%; } /* Button im Editor kompakt */ .sd-preview .sd-btn{ padding:4px 8px; gap:6px; font-size:12px; } .sd-preview .sd-ic { font-size:var(--sd-icon-size, 19px); } .sd-preview .sd-lb { font-size: var(--sd-label-size, 14px); } /* Kleine Legende: „Share/Link · Service“ */ .sd-edit-legend{ --fg:#2a394d; --bd:#e6ecf5; --bg:#f6f8fc; --fgShare:#2a394d; /* vorher fast weiß → schlechte Lesbarkeit */ --fgLink:#0b7b54; display:inline-flex; align-items:center; gap:4px; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; font-size:11px; line-height:1.1; color:var(--fg); padding:2px 6px; border:1px solid var(--bd); border-radius:8px; background:var(--bg); white-space:nowrap; max-width:100%; } .sd-edit-legend .sd-legend-mode{ font-weight:700; /* Modus-Farbe */ } .sd-edit-legend.is-share .sd-legend-mode{ color:var(--fgShare); } .sd-edit-legend.is-link .sd-legend-mode{ color:var(--fgLink); } .sd-edit-legend .sd-legend-sep{ opacity:.5; } /* 👉 Dienst-Name: etwas größer & fett, damit er sofort erkennbar ist */ .sd-edit-legend .sd-legend-svc{ font-size:11px; font-weight:700; overflow:hidden; text-overflow:ellipsis; max-width:32ch; text-transform:capitalize; /* hübscher als alles klein */ } /* 👉 Falls KEIN Label im HTML steht, nimm data-svc als Fallback-Text */ .sd-edit-legend .sd-legend-svc:empty::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing:.2px; } /* Markennamen-Sonderfälle für den Fallback-Text */ .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="youtube"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="youtube"]::after{ content:"YouTube"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="hn"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="hn"]::after{ content:"Hacker News"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="line"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="line"]::after{ content:"LINE"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="vk"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="vk"]::after{ content:"VK"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="xing"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="xing"]::after{ content:"XING"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="webshare"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="webshare"]::after{ content:"Web Share"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="x"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="x"]::after{ content:"X"; } /* Mini-Zeile: edel, freundlich, sehr kompakt */ .sd-item-mini{ --sd-brand:#6c757d; /* Fallback Brand */ --sd-bg:#f6f8fc; /* freundliches Hell */ --sd-bd:#e6ecf5; /* sanfte Linie */ --sd-fg:#243449; /* statt Schwarz: edles Slate */ --sd-badge-bg-share:#eef3ff; --sd-badge-fg-share:#2a5bd7; --sd-badge-bd-share:#e2e9ff; --sd-badge-bg-link:#e8f7f1; --sd-badge-fg-link:#0b7b54; --sd-badge-bd-link:#d6f2e7; display:flex; align-items:center; gap:8px; padding:4px 8px; margin:2px 0; border:0px solid var(--sd-bd); border-radius:4px; background:var(--sd-bg); color:var(--sd-fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; font-size:12px; line-height:1.2; max-width:100%; } .sd-item-mini .sd-dot{ width:8px; height:8px; border-radius:50%; background:var(--sd-brand); flex:0 0 auto; } .sd-item-mini .sd-badge{ font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px; border:1px solid var(--sd-bd); } .sd-item-mini.is-share .sd-badge{ background:var(--sd-badge-bg-share); color:var(--sd-badge-fg-share); border-color:var(--sd-badge-bd-share); } .sd-item-mini.is-link .sd-badge{ background:var(--sd-badge-bg-link); color:var(--sd-badge-fg-link); border-color:var(--sd-badge-bd-link); } .sd-item-mini .sd-text{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; } /* Service-Namen hübsch anzeigen: - wenn kein Label gesetzt ist, erzeugen wir Text via ::after - Standard: capitalize - Ausnahmen (YouTube, Hacker News, LINE, VK, Web Share, etc.) */ .sd-item-mini .sd-svc::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing:.2px; } /* Ausnahmen/Mappings auf echte Markennamen */ .sd-item-mini.sd--youtube .sd-svc::after{ content:"YouTube"; } .sd-item-mini.sd--hn .sd-svc::after{ content:"Hacker News"; } .sd-item-mini.sd--line .sd-svc::after{ content:"LINE"; } .sd-item-mini.sd--vk .sd-svc::after{ content:"VK"; } .sd-item-mini.sd--xing .sd-svc::after{ content:"XING"; } .sd-item-mini.sd--webshare .sd-svc::after{ content:"Web Share"; } .sd-item-mini.sd--x .sd-svc::after{ content:"X"; } /* Dark-Mode (freundlich, nicht pechschwarz) */ @media (prefers-color-scheme: dark){ .sd-item-mini{ --sd-bg:#818c9f; --sd-bd:#243449; --sd-fg:#e7ecf3; --sd-badge-bg-share:#11203f; --sd-badge-fg-share:#9fb6ff; --sd-badge-bd-share:#1a2a4a; --sd-badge-bg-link:#0f221b; --sd-badge-fg-link:#86d6b7; --sd-badge-bd-link:#153428; } } /* Brandfarbe nach Dienst (nur Variable setzen, dezente Dot-Farbe) */ .sd-item-mini.sd--x{--sd-brand:#111} .sd-item-mini.sd--facebook{--sd-brand:#1877f2} .sd-item-mini.sd--linkedin{--sd-brand:#0a66c2} .sd-item-mini.sd--whatsapp{--sd-brand:#25d366} .sd-item-mini.sd--telegram{--sd-brand:#24a1de} .sd-item-mini.sd--pinterest{--sd-brand:#e60023} .sd-item-mini.sd--mail,.sd-item-mini.sd--copy,.sd-item-mini.sd--print,.sd-item-mini.sd--webshare{--sd-brand:#6c757d} .sd-item-mini.sd--threads{--sd-brand:#000} .sd-item-mini.sd--bluesky{--sd-brand:#1185fe} .sd-item-mini.sd--reddit{--sd-brand:#ff4500} .sd-item-mini.sd--hn{--sd-brand:#ff6600} .sd-item-mini.sd--pocket{--sd-brand:#ef4056} .sd-item-mini.sd--flipboard{--sd-brand:#e12828} .sd-item-mini.sd--vk{--sd-brand:#4c75a3} .sd-item-mini.sd--line{--sd-brand:#00c300} .sd-item-mini.sd--weibo{--sd-brand:#e6162d} .sd-item-mini.sd--xing{--sd-brand:#026466} .sd-item-mini.sd--mastodon{--sd-brand:#6364ff} /* Link-Only & generisch */ .sd-item-mini.sd--instagram{--sd-brand:#E1306C} .sd-item-mini.sd--youtube{--sd-brand:#f00} .sd-item-mini.sd--tiktok{--sd-brand:#000} .sd-item-mini.sd--github{--sd-brand:#24292e} .sd-item-mini.sd--website,.sd-item-mini.sd--external{--sd-brand:#6c757d} /* Auto-Label: Service-Namen hübsch darstellen, wenn kein eigenes Label gesetzt ist */ .sd-preview .sd-auto-label::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing: .2px; } /* Ausnahmen für Markennamen */ .sd-preview .sd-btn.sd-youtube .sd-auto-label::after{ content: "YouTube"; } .sd-preview .sd-btn.sd-hn .sd-auto-label::after{ content: "Hacker News"; } .sd-preview .sd-btn.sd-line .sd-auto-label::after{ content: "LINE"; } .sd-preview .sd-btn.sd-vk .sd-auto-label::after{ content: "VK"; } .sd-preview .sd-btn.sd-xing .sd-auto-label::after{ content: "XING"; } .sd-preview .sd-btn.sd-webshare .sd-auto-label::after{ content: "Web Share"; } .sd-preview .sd-btn.sd-x .sd-auto-label::after{ content: "X"; } /* Kompakter machen, damit die Zeile wenig Platz braucht (ohne die Parent-Optik zu brechen) */ .sd-preview .sd-btn{ padding: 6px 10px; /* etwas schlanker */ gap: 6px; /* engerer Abstand Icon/Label */ font-size: 13px; /* kompakt, aber lesbar */ } .sd-preview .sd-ic { font-size: var(--sd-icon-size, 19px); } /* Legenden-Container kompakt lassen */ .sd-edit-inline{ display:flex; align-items:center; gap:8px; max-width:100%; } /* Button im Editor kompakt */ .sd-preview .sd-btn{ padding:4px 8px; gap:6px; font-size:12px; } .sd-preview .sd-ic { font-size:var(--sd-icon-size, 19px); } .sd-preview .sd-lb { font-size: var(--sd-label-size, 14px); } /* Kleine Legende: „Share/Link · Service“ */ .sd-edit-legend{ --fg:#2a394d; --bd:#e6ecf5; --bg:#f6f8fc; --fgShare:#2a394d; /* vorher fast weiß → schlechte Lesbarkeit */ --fgLink:#0b7b54; display:inline-flex; align-items:center; gap:4px; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; font-size:11px; line-height:1.1; color:var(--fg); padding:2px 6px; border:1px solid var(--bd); border-radius:8px; background:var(--bg); white-space:nowrap; max-width:100%; } .sd-edit-legend .sd-legend-mode{ font-weight:700; /* Modus-Farbe */ } .sd-edit-legend.is-share .sd-legend-mode{ color:var(--fgShare); } .sd-edit-legend.is-link .sd-legend-mode{ color:var(--fgLink); } .sd-edit-legend .sd-legend-sep{ opacity:.5; } /* 👉 Dienst-Name: etwas größer & fett, damit er sofort erkennbar ist */ .sd-edit-legend .sd-legend-svc{ font-size:11px; font-weight:700; overflow:hidden; text-overflow:ellipsis; max-width:32ch; text-transform:capitalize; /* hübscher als alles klein */ } /* 👉 Falls KEIN Label im HTML steht, nimm data-svc als Fallback-Text */ .sd-edit-legend .sd-legend-svc:empty::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing:.2px; } /* Markennamen-Sonderfälle für den Fallback-Text */ .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="youtube"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="youtube"]::after{ content:"YouTube"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="hn"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="hn"]::after{ content:"Hacker News"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="line"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="line"]::after{ content:"LINE"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="vk"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="vk"]::after{ content:"VK"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="xing"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="xing"]::after{ content:"XING"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="webshare"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="webshare"]::after{ content:"Web Share"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="x"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="x"]::after{ content:"X"; } #stacks_in_162 { margin: 10px 0px 0px 0px; } #stacks_out_162 { width: 250px; margin-left:0; } #stacks_in_164 { margin: 20px 0px 0px 0px; } #stacks_out_164 { width: 50px; margin-left:0; } #toTop{--elevator-image:url(../../rw_common/plugins/stacks/elevator-images/top.png);--elevator-size:50px;display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:var(--elevator-size);height:var(--elevator-size);border:none;text-indent:-9999px;background-image:var(--elevator-image);background-repeat:no-repeat;background-position:left top;z-index:9988}#toTop:active,#toTop:focus{outline:none}#toTop:hover{background-position:left calc(var(--elevator-size) * -1)}