.charitable-panel-fields { width: 100vw; height: 100vh; } .charitable-panel-fields .charitable-field-row:before { content: ""; display: table; } .charitable-panel-fields .charitable-field-row:after { clear: both; content: ""; display: table; } .charitable-panel-fields #charitable-hidden { display: none; } .charitable-panel-fields .charitable-field-dragging { background-color: #f1f1f1; } .charitable-panel-fields .charitable-field-drag-out { background: #036aab; border: none; border-radius: 4px; color: #ffffff; display: block; margin: 20px 0 0 0; padding: 12px 5px 12px 18px; text-align: left; width: 172px; max-width: 172px; z-index: 10000; } .charitable-panel-fields .charitable-field-drag-out i { color: rgba(255, 255, 255, 0.65); margin: 0 5px 0 0; } .charitable-panel-fields .charitable-field-drag-over, .charitable-panel-fields .charitable-field-drag { border: 1px dashed #cccccc; border-radius: 6px; color: #444444; font-size: 14px; margin: 0 0 5px 0; padding: 20px; text-align: center; width: 100%; } .charitable-panel-fields .charitable-field-drag-placeholder { border: 1px dashed #cccccc; border-radius: 6px; margin: 0 0 5px 0; width: 100%; height: 60px; position: relative; } .charitable-panel-fields .charitable-field-drag-placeholder.charitable-field-drag-not-allowed { border-color: #b32d2e; } .charitable-panel-fields .charitable-field-drag-placeholder.charitable-field-drag-locked-row::after { content: "\f160"; font-family: "dashicons"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #b32d2e; font-size: 24px; line-height: 1; pointer-events: none; } .charitable-panel-fields .charitable-field-drag-not-allowed { cursor: not-allowed !important; } .charitable-panel-fields .charitable-field-drag-pending { background-color: #f8f8f8; border: 1px dashed #cccccc; border-radius: 6px; margin: 0 0 5px 0; } .charitable-panel-fields .charitable-field-drag-pending i { color: #777777; font-size: 18px; line-height: 24px; margin: 0 5px 0 10px; } #charitable-panel-design .charitable-panel-sidebar { position: absolute; top: calc(124px + var(--charitable-admin-bar-height)); bottom: 0; left: 95px; overflow: hidden; transition-property: top, width, left; transition-duration: 0.25s, 0.15s, 0.15s; transition-timing-function: ease-out, ease-out, ease-in-out; } #charitable-panel-design .charitable-panel-sidebar .no-gap { margin-bottom: 0; } #charitable-panel-design .charitable-panel-sidebar .sub-label { color: #86919e; font-size: 12px; line-height: 14px; margin: 8px 0 0 1px; } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns { align-items: baseline; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin-bottom: 20px; } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns + .charitable-field-options-columns { margin-top: -10px; } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns:last-child { margin-bottom: 0; } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns > .charitable-field-options-column:first-child { margin-left: 1px; } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns > .charitable-field-options-column { flex-grow: 1; } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-2 > .charitable-field-options-column { max-width: calc(100%/2 - 6px); } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-3 > .charitable-field-options-column { max-width: calc(100%/3 - 9px); } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-4 > .charitable-field-options-column { max-width: calc(100%/4 - 10px); } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-5 > .charitable-field-options-column { max-width: calc(100%/5 - 10px); } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-6 > .charitable-field-options-column { max-width: calc(100%/6 - 10px); } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-7 > .charitable-field-options-column { max-width: calc(100%/7 - 11px); text-align: center; } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.checkboxes-row > label { margin-top: 0; max-width: 24px; } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.checkboxes-row > label input { margin: 1px 0 5px 0; } #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns select { display: block; } .charitable-panel-fields .charitable-no-fields-area { position: absolute; top: 0; left: 0; right: 0; z-index: 0; } .charitable-panel-fields .charitable-no-fields-area .no-fields-preview { align-content: center; background-image: url("../../images/campaign-builder/default-arrow.svg"); background-position: 15px 10px; background-repeat: no-repeat; background-size: 97px 83px; min-height: calc(50vh - 260px - var(--charitable-admin-bar-height)); padding-bottom: 40px; padding-top: 40px; text-align: center; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .charitable-panel-fields .charitable-no-fields-area .no-fields-preview::before { background-image: url("../../images/campaign-builder/no-fields.svg"); background-position: center center; background-repeat: no-repeat; background-size: 371px 260px; content: ""; display: block; height: 275px; width: 100%; } .charitable-panel-fields .charitable-no-fields-area .no-fields-preview h4 { color: #444444; font-size: 24px; font-weight: 600; line-height: 29px; margin: 30px 0 10px; } .charitable-panel-fields .charitable-no-fields-area .no-fields-preview p { color: #777777; font-size: 16px; font-weight: 400; line-height: 19px; margin: 0; } .charitable-panel-fields .charitable-preview-top-bar { border-bottom: 1px solid #dddddd; margin: 0 0 15px 0px; padding-bottom: 15px; width: 100%; display: table; } .charitable-panel-fields .charitable-preview-top-bar:hover { cursor: pointer; } .charitable-panel-fields .charitable-preview-top-bar .charitable-form-name { font-size: 28px; font-weight: 600; line-height: 28px; margin: 0; padding: 0; word-break: break-all; } .charitable-panel-fields .charitable-preview-top-bar mark { font-weight: 300; padding: 5px 8px; font-size: 14px; line-height: 14px; background-color: #f8f8f8; } .charitable-panel-fields .charitable-preview-top-bar mark.charitable-builder-status-active { color: #00a32a; } .charitable-panel-fields .charitable-preview-top-bar mark.charitable-builder-status-successful { color: #e27730; } .charitable-panel-fields .charitable-preview-top-bar mark.charitable-builder-status-unsuccessful { color: #d63638; } .charitable-panel-fields .charitable-preview-top-bar .charitable-campaign-theme-label { font-weight: 300; font-size: 80%; } .charitable-panel-fields .charitable-preview-top-bar .charitable-template-swatch { width: 15px; height: 15px; display: inline-block; border: 1px solid; margin: 0 0 -3px 0; } .charitable-panel-fields .charitable-preview-top-bar .charitable-preview-top-bar-inner { padding: 0 200px 15px 0; } .charitable-panel-fields .charitable-preview-top-bar .charitable-preview-top-bar-inner-left { float: left; } .charitable-panel-fields .charitable-preview-top-bar .charitable-preview-top-bar-inner-right { float: right; } .charitable-panel-fields .charitable-field-wrap { padding-bottom: 19px; } .charitable-panel-fields .charitable-field-wrap.column { padding-left: 15px; padding-right: 15px; } .charitable-panel-fields .charitable-field { border: 2px solid transparent; border-radius: 0; font-size: 14px; margin: 5px 0; padding: 5px; position: relative; transition-property: border-color; transition-duration: 0.25s; transition-timing-function: ease-in; } .charitable-panel-fields .charitable-field.charitable-no-duplicate a.charitable-field-delete { right: 0; } .charitable-panel-fields .charitable-field.charitable-no-duplicate a.charitable-field-edit { right: 30px; } .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered):hover { border: 2px solid #036aab; cursor: pointer; } .charitable-panel-fields .charitable-field.active { background-color: rgba(248, 248, 248, 0.05); border: 2px solid #036aab; } .charitable-panel-fields .charitable-field .label-title { cursor: pointer; display: block; font-size: 16px; font-weight: 600; line-height: 20px; margin: 0 0 15px 0; padding-right: 60px; text-align: left; word-break: break-word; } .charitable-panel-fields .charitable-field .label-title .required { color: #d63638; display: none; } .charitable-panel-fields .charitable-field .label-title .hidden_text, .charitable-panel-fields .charitable-field .label-title .empty_text { display: none; } .charitable-panel-fields .charitable-field.label_empty > .label-title { color: #444444; } .charitable-panel-fields .charitable-field.label_empty > .label-title .empty_text { display: inline; color: #ffb900; line-height: 1; padding-right: 5px; } .charitable-panel-fields .charitable-field.label_empty > .label-title .hidden_text { display: none !important; } .charitable-panel-fields .charitable-field.label_hide.label_empty > .label-title .text { color: #444444; } .charitable-panel-fields .charitable-field.label_hide > .label-title { color: #777777; } .charitable-panel-fields .charitable-field.label_hide > .label-title .hidden_text { display: inline; color: #777777; line-height: 1; padding-right: 5px; } .charitable-panel-fields .charitable-field.sublabel_hide .charitable-sub-label { display: none; } .charitable-panel-fields .charitable-field.required .label-title .required { display: inline-block; font-weight: 300; margin: 0 0 0 5px; } .charitable-panel-fields .charitable-field .charitable-sub-label { color: #999999; display: block; font-size: 14px; line-height: 17px; margin: 5px 0 0 1px; word-break: break-word; } .charitable-panel-fields .charitable-field input[readonly], .charitable-panel-fields .charitable-field input[disabled], .charitable-panel-fields .charitable-field textarea[readonly], .charitable-panel-fields .charitable-field textarea[disabled], .charitable-panel-fields .charitable-field select[readonly], .charitable-panel-fields .charitable-field select[disabled] { background-color: #ffffff; border: 1px solid #cccccc; box-shadow: none; color: #999999; cursor: pointer; opacity: 1; } .charitable-panel-fields .charitable-field input[type=text], .charitable-panel-fields .charitable-field input[type=range], .charitable-panel-fields .charitable-field input[type=email], .charitable-panel-fields .charitable-field input[type=url], .charitable-panel-fields .charitable-field input[type=password], .charitable-panel-fields .charitable-field input[type=file], .charitable-panel-fields .charitable-field select, .charitable-panel-fields .charitable-field textarea { background-color: #ffffff; border: 1px solid #cccccc; border-radius: 4px; box-shadow: none; display: block; font-size: 16px; height: 40px; max-width: none; padding: 6px 10px; width: 60%; min-width: 250px; } .charitable-panel-fields .charitable-field textarea { height: 110px; width: 100%; min-width: 100%; } .charitable-panel-fields .charitable-field textarea[readonly], .charitable-panel-fields .charitable-field textarea[disabled] { resize: none; } .charitable-panel-fields .charitable-field input[type=checkbox], .charitable-panel-fields .charitable-field input[type=radio] { margin-right: 10px; } .charitable-panel-fields .charitable-field select[multiple] { height: auto; } .charitable-panel-fields .charitable-field select { padding-right: 24px; overflow: hidden !important; text-overflow: ellipsis; } .charitable-panel-fields .charitable-field select > option { color: inherit; opacity: 1; } .charitable-panel-fields .charitable-field h6.charitable-preview-field-title { font-size: 14px; margin: 0 0 8px 5px; position: absolute; z-index: 9; padding: 5px; top: -5px; left: 0; color: white !important; width: auto; right: 0; text-align: center; border-top: 1px solid black; } .charitable-panel-fields .charitable-field h6.charitable-preview-field-title span { background-color: rgba(0, 0, 0, 0.43); display: table !important; padding: 3px 10px !important; margin: -5px auto 0 auto !important; width: auto !important; } .charitable-panel-fields .charitable-field.size-small input[type=text], .charitable-panel-fields .charitable-field.size-small input[type=range], .charitable-panel-fields .charitable-field.size-small input[type=email], .charitable-panel-fields .charitable-field.size-small input[type=url], .charitable-panel-fields .charitable-field.size-small input[type=password], .charitable-panel-fields .charitable-field.size-small select { width: 25%; } .charitable-panel-fields .charitable-field.size-small textarea { height: 60px; } .charitable-panel-fields .charitable-field.size-large input[type=text], .charitable-panel-fields .charitable-field.size-large input[type=range], .charitable-panel-fields .charitable-field.size-large input[type=email], .charitable-panel-fields .charitable-field.size-large input[type=url], .charitable-panel-fields .charitable-field.size-large input[type=password], .charitable-panel-fields .charitable-field.size-large select { width: 100%; } .charitable-panel-fields .charitable-field.size-large textarea { height: 300px; } .charitable-panel-fields .charitable-field .charitable-field-row { margin: 0 0 10px 0; position: relative; } .charitable-panel-fields .charitable-field .charitable-field-row:last-of-type { margin: 0; } .charitable-panel-fields .charitable-field .charitable-field-edit, .charitable-panel-fields .charitable-field .charitable-field-duplicate, .charitable-panel-fields .charitable-field .charitable-field-delete { background-color: #036aab; color: #ffffff; font-size: 16px; height: 30px; opacity: 0; position: absolute; top: 0; right: 0; text-align: center; width: 30px; z-index: 10; display: flex; text-decoration: none; transition-property: all; transition-duration: 0.25s; transition-timing-function: ease-in; } .charitable-panel-fields .charitable-field .charitable-field-edit i, .charitable-panel-fields .charitable-field .charitable-field-duplicate i, .charitable-panel-fields .charitable-field .charitable-field-delete i { font-size: 14px; padding: 8px; } .charitable-panel-fields .charitable-field .charitable-field-edit:hover, .charitable-panel-fields .charitable-field .charitable-field-duplicate:hover, .charitable-panel-fields .charitable-field .charitable-field-delete:hover { background-color: #4285f4; } .charitable-panel-fields .charitable-field .charitable-field-edit:hover i, .charitable-panel-fields .charitable-field .charitable-field-duplicate:hover i, .charitable-panel-fields .charitable-field .charitable-field-delete:hover i { color: #ffffff; } .charitable-panel-fields .charitable-field .charitable-field-delete { color: #ffffff; right: 30px; font-size: 18px; } .charitable-panel-fields .charitable-field .charitable-field-edit { color: #ffffff; right: 60px; font-size: 18px; } .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered):hover > .charitable-field-edit, .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered):hover > .charitable-field-duplicate, .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered):hover > .charitable-field-delete, .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered).active > .charitable-field-edit, .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered).active > .charitable-field-duplicate, .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered).active > .charitable-field-delete { opacity: 1; } .charitable-panel-fields .charitable-field.charitable-field-pagebreak .charitable-field-duplicate { display: none; } .charitable-panel-fields .charitable-field.charitable-field-missing { text-align: center; border: 2px solid; overflow: hidden; position: relative; } .charitable-panel-fields .charitable-field.charitable-field-missing .charitable-field-delete { right: 0; } .charitable-panel-fields .charitable-field.charitable-field-missing .education-buttons { margin: 10px auto; } .charitable-panel-fields .charitable-field.charitable-field-missing p strong { font-weight: 600; } .charitable-panel-fields .charitable-field.charitable-field-missing .button-link { background-color: #5AA152; color: #ffffff; margin-left: 4px; padding: 10px 30px; position: relative; top: 0; text-decoration: none; border-radius: 5px; text-shadow: none; font-weight: 600; font-family: "Inter"; font-size: 16px; line-height: normal; cursor: pointer; display: inline-block; opacity: 1 !important; } .charitable-panel-fields .charitable-field.charitable-field-missing .button-link:hover { color: white; } .charitable-panel-fields .charitable-field.charitable-field-missing button { background-color: #e27730; border: 0; color: #fff; font-weight: 600; text-transform: uppercase; -webkit-transition: background 0.1s; transition: background 0.1s; padding: 10px 20px; min-width: 83px; border-radius: 5px; font-size: 16px; line-height: 20px; outline: none; cursor: pointer; } .charitable-panel-fields .charitable-field.charitable-field-missing .charitable-missing-addon-content { position: relative; padding: 10px; display: table; margin-left: auto; margin-right: auto; border: 1px solid rgba(204, 204, 204, 0.8); } .charitable-panel-fields .charitable-field.charitable-field-missing .charitable-missing-addon-bg { opacity: 0.4; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: contain; background-repeat: repeat-x; background-position: left; } .charitable-panel-fields .charitable-field .charitable-field-helper { background: #eeeeee; border-left: 1px dashed #cccccc; border-radius: 6px 0; border-top: 1px dashed #cccccc; bottom: 0; color: #999999; font-size: 11px; line-height: 14px; font-weight: 500; opacity: 0; padding: 9px; position: absolute; right: 0; z-index: 10; display: flex; justify-content: right; align-items: center; transition-property: all; transition-duration: 0.25s; transition-timing-function: ease-in; } .charitable-panel-fields .charitable-field .charitable-field-helper-edit { margin-right: 5px; } .charitable-panel-fields .charitable-field .charitable-field-helper-drag { position: relative; padding-left: 5px; margin-right: 5px; } .charitable-panel-fields .charitable-field .charitable-field-helper-drag:before { content: ""; position: absolute; width: 1px; height: calc(100% - 6px); background: #a6a6a6; left: 0; top: 3px; } .charitable-panel-fields .charitable-field .charitable-field-helper-hide { color: #a6a6a6; margin-left: 5px; font-size: 14px; width: 14px; height: 14px; text-align: center; } .charitable-panel-fields .charitable-field .charitable-field-helper-hide:hover { color: #777777; } .charitable-panel-fields .charitable-field-not-draggable .charitable-field-helper-drag { display: none; } .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered):hover > .charitable-field-helper { opacity: 1; } .charitable-panel-fields .charitable-field.charitable-field-radio .charitable-alert-dynamic, .charitable-panel-fields .charitable-field.charitable-field-checkbox .charitable-alert-dynamic, .charitable-panel-fields .charitable-field.charitable-field-payment-multiple .charitable-alert-dynamic, .charitable-panel-fields .charitable-field.charitable-field-payment-checkbox .charitable-alert-dynamic { margin: 15px 0 0 0; } .charitable-panel-fields .charitable-field.charitable-field-stick .charitable-field-delete, .charitable-panel-fields .charitable-field.charitable-field-stick .charitable-field-helper { display: none !important; } .charitable-panel-fields .charitable-field .description { clear: both; color: #777777; font-size: 14px; margin: 5px 0 0 0; word-break: break-word; } .charitable-panel-fields .charitable-field .description:empty { margin: 0; } .charitable-panel-fields .charitable-field .description.disclaimer { background-color: #ffffff; border: 1px solid #cccccc; font-size: 12px; height: 125px; margin-top: 15px; overflow-y: scroll; padding: 10px 10px 0 10px; } .charitable-panel-fields .charitable-field .description.disclaimer p { font-size: inherit; line-height: 17px; margin: 0 0 15px 0; } .charitable-panel-fields .ui-sortable-disabled .charitable-field .charitable-field-duplicate, .charitable-panel-fields .ui-sortable-disabled .charitable-field .charitable-field-edit, .charitable-panel-fields .ui-sortable-disabled .charitable-field .charitable-field-delete { cursor: no-drop; } .charitable-panel-fields .charitable-field-submit { margin-bottom: 0; } .charitable-panel-fields .charitable-field-submit input[type=submit] { background: #999999; border: none; border-radius: 4px; color: #ffffff; cursor: pointer; font-size: 17px; font-weight: 600; line-height: 21px; padding: 10px 15px; } .charitable-panel-fields .charitable-field-submit input[type=submit]:focus { border: none; box-shadow: none; } #charitable-panel-design .charitable-tabs { background: #e0e8f0; border-bottom: 1px solid #ced7e0; display: flex; flex-wrap: nowrap; left: 95px; margin: 0; padding: 0; position: fixed; top: calc(76px + var(--charitable-admin-bar-height)); width: 400px; z-index: 1; transition-property: top, width, left; transition-duration: 0.25s, 0.15s, 0.15s; transition-timing-function: ease-out; } #charitable-panel-design .charitable-tabs .active { background: #ebf3fc; } #charitable-panel-design .charitable-tabs li { margin: 0; width: 50%; position: relative; } #charitable-panel-design .charitable-tabs li:last-of-type { border-left: 1px solid #ced7e0; } #charitable-panel-design .charitable-tabs a { color: #444444; display: block; font-size: 16px; font-weight: 400; line-height: 20px; overflow: hidden; padding: 14px; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } #charitable-panel-design .charitable-tabs a:hover { color: #777777; text-decoration: none; } #charitable-panel-design .charitable-tabs a:focus { -webkit-box-shadow: none; box-shadow: none; } #charitable-panel-design .charitable-tabs a i { color: #86919e; font-size: 16px; margin-right: 10px; } #charitable-panel-design .charitable-tabs a.active { pointer-events: none; } #charitable-panel-design .charitable-tabs a.active, #charitable-panel-design .charitable-tabs a.active:hover { color: #444444; font-weight: 600; text-decoration: none; } #charitable-panel-design .charitable-tab-content { display: none; margin: 40px 0 0 0; position: relative; height: calc(100% - 40px); overflow: auto; } #charitable-panel-design .charitable-tab-content.charitable-add-fields { display: block; margin-top: 0; padding: 20px; height: 100%; } #charitable-panel-design .charitable-tab-content.charitable-hide-options-groups { margin-top: 0; height: 100%; } #charitable-panel-design .charitable-tab-content.charitable-hide-options-groups:before { display: none !important; } #charitable-panel-design .charitable-tab-content.charitable-hide-options-groups .charitable-field-option-group-toggle, #charitable-panel-design .charitable-tab-content.charitable-hide-options-groups .charitable-group-toggle { display: none !important; } .charitable-add-fields-group { border-bottom: 1px solid #ced7e0; position: relative; } .charitable-add-fields-group:first-of-type { margin-top: -20px; } .charitable-add-fields-group:last-of-type { margin-bottom: 0; padding-bottom: 0; } .charitable-add-fields-group a { color: #444444; display: block; font-size: 16px; font-weight: 600; margin: 0; outline: 0; overflow: hidden; padding: 20px 0; text-decoration: none; } .charitable-add-fields-group a:hover { text-decoration: none; } .charitable-add-fields-group a:active, .charitable-add-fields-group a:focus { outline: 0; } .charitable-add-fields-group a i { color: #86919e; float: right; font-size: 20px; margin: -2px 0 0 0; transition-property: transform; transition-duration: 0.4s; transition-timing-function: ease-out; } .charitable-add-fields-group a i.charitable-angle-right { transform: rotate(-90deg); } .charitable-add-fields-group span.charitable-group-description { display: inline-block; font-size: 14px; line-height: 14px; margin: 5px 0 0 0; font-weight: 200; } .charitable-add-fields-group .charitable-add-fields-buttons { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; overflow: hidden; } .charitable-add-fields-group .charitable-group-rows { width: 100%; } .charitable-add-fields-group.charitable-close .charitable-group-rows, .charitable-add-fields-group.charitable-closed .charitable-group-rows { display: none; } .charitable-add-fields-group .charitable-add-fields-button-wrap { width: calc(50% - 8px); margin: 16px 0 0 0; position: relative; } .charitable-add-fields-group .charitable-add-fields-button-wrap .charitable-check { position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; z-index: 9; background-image: url("../../images/campaign-builder/unchecked-circle.svg"); background-repeat: no-repeat; background-size: contain; border: 2px solid green; border-radius: 50%; } .charitable-add-fields-group .charitable-add-fields-button-wrap .charitable-check.checked { background-image: url("../../images/campaign-builder/check-circle.svg"); } .charitable-add-fields-group button { background-color: #036aab; border: none; border-radius: 4px; color: #ffffff; display: block; margin: 16px 0 0 0; width: 100%; overflow: hidden; padding: 12px 5px 12px 14px; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .charitable-add-fields-group button:hover { background-color: #215d8f; cursor: pointer; } .charitable-add-fields-group button:disabled:hover, .charitable-add-fields-group button.ui-draggable-disabled:hover { background-color: #036aab; cursor: no-drop; } .charitable-add-fields-group button:nth-child(1), .charitable-add-fields-group button:nth-child(2) { margin-top: 0; } .charitable-add-fields-group button i { color: rgba(255, 255, 255, 0.6); display: inline-block; margin: 0 7px 0 0; } .charitable-add-fields-group.charitable-add-fields-group-recommended .charitable-add-fields-button-wrap { position: relative; } .charitable-add-fields-group-recommended .charitable-add-fields-buttons { overflow: visible; } .charitable-closed .charitable-group-rows { display: none; } .charitable-group-rows.row-first { margin-top: 20px; } .charitable-field-option-row, .charitable-group-row { margin-bottom: 20px; } .charitable-field-option-row-description p.note, .charitable-group-row-description p.note { margin-top: -15px; } .charitable-field-option-row label, .charitable-group-row label { display: block; font-size: 14px; font-weight: 400; line-height: 17px; margin: 0 0 8px 1px; } .charitable-field-option-row label.inline, .charitable-group-row label.inline { display: inline-block; font-weight: 400; margin: 0 0 0 10px; } .charitable-field-option-row label + .charitable-field-option-in-label-right, .charitable-group-row label + .charitable-field-option-in-label-right { display: inline-block; float: right; margin-bottom: 0; margin-top: -27px; } .charitable-field-option-row label + .charitable-field-option-in-label-right:after, .charitable-group-row label + .charitable-field-option-in-label-right:after { clear: both; content: ""; display: table; } .charitable-field-option-row label select, .charitable-field-option-row label input, .charitable-field-option-row label textarea, .charitable-field-option-row label .ql-toolbar, .charitable-group-row label select, .charitable-group-row label input, .charitable-group-row label textarea, .charitable-group-row label .ql-toolbar { margin-top: 10px; } .charitable-field-option-row label textarea.ql-container, .charitable-group-row label textarea.ql-container { margin: 0; border-radius: 0; width: 100%; } .charitable-field-option-row .after-label-description, .charitable-group-row .after-label-description { color: #86919e; float: right; font-size: 12px; text-decoration: none; } .charitable-field-option-row .after-label-description:hover, .charitable-group-row .after-label-description:hover { color: #777777; text-decoration: underline; } .charitable-field-option-row input:not(:focus), .charitable-field-option-row textarea:not(:focus), .charitable-field-option-row select:not(:focus), .charitable-group-row input:not(:focus), .charitable-group-row textarea:not(:focus), .charitable-group-row select:not(:focus) { border-color: #b0b6bd; } .charitable-field-option-row input[type=checkbox], .charitable-field-option-row input[type=radio], .charitable-group-row input[type=checkbox], .charitable-group-row input[type=radio] { margin-right: 0; } .charitable-field-option-row input[type=text], .charitable-field-option-row input[type=number], .charitable-field-option-row textarea, .charitable-field-option-row select, .charitable-group-row input[type=text], .charitable-group-row input[type=number], .charitable-group-row textarea, .charitable-group-row select { width: calc(100% - 2px); } .charitable-field-option-row input[type=text].has-before, .charitable-group-row input[type=text].has-before { float: right; width: 95%; } .charitable-field-option-row .before-input, .charitable-group-row .before-input { float: left; padding: 7px 0 0 0; width: 4%; } .charitable-field-option-row p, .charitable-group-row p { font-size: 14px; margin: 0; } .charitable-field-option-row .meta, .charitable-group-row .meta { font-weight: 400; } .charitable-field-option-row span.id, .charitable-group-row span.id { color: #86919e; font-size: 12px; } .charitable-field-option-row.charitable-field-option-row-code textarea, .charitable-group-row.charitable-field-option-row-code textarea { font-family: monospace; font-size: 12px; min-height: 120px; } .charitable-field-option-row.charitable-field-option-row-limit_controls, .charitable-group-row.charitable-field-option-row-limit_controls { align-items: center; display: flex; } .charitable-field-option-row.charitable-field-option-row-limit_controls.charitable-hide, .charitable-group-row.charitable-field-option-row-limit_controls.charitable-hide { display: none; } .charitable-field-option-row.charitable-field-option-row-limit_controls input, .charitable-group-row.charitable-field-option-row-limit_controls input { margin-right: 10px; } .charitable-field-option-row.color-picker-row, .charitable-group-row.color-picker-row { overflow: visible; } .charitable-field-option-row.color-picker-row .minicolors, .charitable-group-row.color-picker-row .minicolors { width: 100%; } .charitable-field-option-row.color-picker-row .minicolors .minicolors-swatch, .charitable-group-row.color-picker-row .minicolors .minicolors-swatch { height: 22px; width: 22px; border-radius: 2px; border: none; overflow: hidden; box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); } .charitable-field-option-row.color-picker-row .minicolors .minicolors-swatch .minicolors-swatch-color, .charitable-group-row.color-picker-row .minicolors .minicolors-swatch .minicolors-swatch-color { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); } .charitable-field-option-row.color-picker-row .charitable-color-picker, .charitable-group-row.color-picker-row .charitable-color-picker { height: auto; padding-left: 35px !important; } .charitable-field-option-row .coloris-layout, .charitable-group-row .coloris-layout { max-width: none; width: 100%; margin-top: 2px; margin-bottom: 2px; } .charitable-field-option-row .coloris-layout label, .charitable-group-row .coloris-layout label { display: inline-block; width: 75px; font-size: 13px; line-height: 26px; } .charitable-field-option-row .coloris-layout .clr-field, .charitable-group-row .coloris-layout .clr-field { width: 100px; float: right; } .charitable-field-option-row .coloris-layout .clr-field button, .charitable-group-row .coloris-layout .clr-field button { border-radius: 25px; left: 0; width: 20px; height: 20px; margin: 0; left: -30px; cursor: pointer; } .charitable-field-option-row .coloris-layout .clr-field button::after, .charitable-group-row .coloris-layout .clr-field button::after { cursor: pointer; pointer-events: fill; } .charitable-field-option-row .coloris-layout .clr-field input, .charitable-group-row .coloris-layout .clr-field input { width: 100px; height: 32px; padding: 0 10px 0 10px; border: 1px solid #ccc; border-radius: 5px; font-family: inherit; font-size: inherit; font-weight: inherit; box-sizing: border-box; margin: 2px 0; } .charitable-field-option-row .charitable-confirm-disabled .charitable-field-option-row-confirmation_placeholder, .charitable-field-option-row .charitable-confirm-disabled .charitable-field-option-row-sublabel_hide, .charitable-group-row .charitable-confirm-disabled .charitable-field-option-row-confirmation_placeholder, .charitable-group-row .charitable-confirm-disabled .charitable-field-option-row-sublabel_hide { display: none; } #charitable-field-options .no-fields.charitable-alert { position: fixed; z-index: 100; margin-top: -20px; margin-left: 20px; width: 360px; } #charitable-panel-design .layout-selector-display .layouts { background-color: #ffffff; border: 1px solid #b0b6bd; border-radius: 4px; display: flex; flex-wrap: wrap; margin: 1px !important; padding: 10px 5px 2px 5px; width: 100% !important; } #charitable-panel-design .layout-selector-display .layout-selector-display-layout { cursor: pointer; min-width: 25%; padding: 0 5px 5px 5px; } #charitable-panel-design .layout-selector-display span { background-color: #b0b6bd; border: 1px solid #ffffff; display: inline-block; height: 30px; transition-property: background-color; transition-duration: 0.25s; transition-timing-function: ease-in; } #charitable-panel-design .layout-selector-display span.one-half { width: 50%; } #charitable-panel-design .layout-selector-display span.one-third { width: 33.3333333333%; } #charitable-panel-design .layout-selector-display span.two-third { width: 66.6666666667%; } #charitable-panel-design .layout-selector-display span.one-fourth { width: 25%; } #charitable-panel-design .layout-selector-display span.two-fourth { width: 50%; } #charitable-panel-design .layout-selector-display .layout-selector-display-layout:hover span, #charitable-panel-design .layout-selector-display .layout-selector-display-columns span:hover { background-color: #036aab; } #charitable-panel-design .layout-selector-display .layout-selector-display-columns { min-width: 100%; padding: 0 5px 5px 5px; } #charitable-panel-design .layout-selector-display .layout-selector-display-columns span { border: 2px solid #ffffff; cursor: pointer; height: 70px; } .charitable-icon-picker-jconfirm-box { border-top: none !important; } .charitable-icon-picker-jconfirm-content-pane { margin-bottom: 15px !important; background-color: #f8f8f8; border-radius: 6px; } .charitable-icon-picker-title .jconfirm-title { margin-top: 0 !important; } .charitable-icon-picker-title .charitable-icon-picker-description { display: block; margin: 15px 0 25px 0; font-size: 16px; line-height: 22px; font-weight: normal; } .charitable-icon-picker-title input { width: 100%; margin: 10px auto; border: none; box-shadow: 0 0 0 1px #cccccc; text-align: center; height: 40px; border-radius: 20px; transition: box-shadow 0.25s ease-in-out; } .charitable-icon-picker-title input:focus { box-shadow: 0 0 0 2px #036aab; } .charitable-icon-picker-title input::placeholder { color: #bbbbbb; } .charitable-icon-picker-container .charitable-icon-picker-icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; grid-auto-rows: min-content; padding: 21px; min-height: 368px; } .charitable-icon-picker-container .charitable-icon-picker-icons li { background-color: #ffffff; box-shadow: 0 0 0 1px #cccccc; border-radius: 6px; display: flex; gap: 10px; flex-direction: column; cursor: pointer; padding: 10px; margin: 0; transition: box-shadow 0.05s ease-in-out; } .charitable-icon-picker-container .charitable-icon-picker-icons li:hover { box-shadow: 0 0 0 2px #777777, 0 4px 4px rgba(0, 0, 0, 0.1); } .charitable-icon-picker-container .charitable-icon-picker-icons li.selected { box-shadow: 0 0 0 2px #e27730, 0 4px 4px rgba(0, 0, 0, 0.1); } .charitable-icon-picker-container .charitable-icon-picker-icons li.selected .ic-fa-solid, .charitable-icon-picker-container .charitable-icon-picker-icons li.selected .ic-fa-brands { color: #e27730; } .charitable-icon-picker-container .charitable-icon-picker-icons li.selected span { color: #777777; } .charitable-icon-picker-container .charitable-icon-picker-icons li .ic-fa-brands, .charitable-icon-picker-container .charitable-icon-picker-icons li .ic-fa-regular, .charitable-icon-picker-container .charitable-icon-picker-icons li .ic-fa-solid { font-size: var(--charitable-icon-choices-size-medium); line-height: var(--charitable-icon-choices-size-medium); color: #777777; } .charitable-icon-picker-container .charitable-icon-picker-icons li span { font-size: 13px; line-height: 16px; color: #bbbbbb; font-weight: 400; width: 102px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .charitable-icon-picker-container .charitable-icon-picker-pagination { overflow: hidden; height: 0; } .charitable-icon-picker-container .charitable-icon-picker-not-found { display: flex; align-items: center; justify-content: center; color: #777777; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .charitable-icon-picker-container .charitable-icon-picker-not-found.charitable-hidden { display: none; } .charitable-icon-picker-container .charitable-icon-picker-not-found strong { margin-left: 5px; } .smart-tags-list, .smart-tags-list-display { background-color: #ffffff; border: 1px solid #b0b6bd; border-radius: 4px; max-height: 175px; overflow-x: hidden; overflow-y: scroll; padding: 0; } .smart-tags-list li.heading, .smart-tags-list-display li.heading { padding: 10px !important; } .charitable-panel-content .smart-tags-list, .charitable-panel-content .smart-tags-list-display { border-color: #cccccc; } .charitable-toggle-control { display: flex; margin: 6px 1px 5px 0px; align-items: flex-end; } .charitable-toggle-control input[type=checkbox] { display: none; height: 0; width: 0; } .charitable-toggle-control input[type=checkbox]:checked + label.charitable-toggle-control-icon { background-color: #036aab; } .charitable-toggle-control input[type=checkbox]:checked + label.charitable-toggle-control-icon:after { left: calc(100% - 13px - 2px); } .charitable-toggle-control span, .charitable-toggle-control label { display: inline-block; margin-bottom: 0; margin-left: 5px; } .charitable-toggle-control label { cursor: pointer; } .charitable-toggle-control .charitable-toggle-control-label { margin: 0 0 0 6px; max-width: calc(100% - 65px); } .charitable-toggle-control .charitable-toggle-control-label:hover { cursor: pointer; } .charitable-toggle-control .charitable-toggle-control-status { color: #86919e; font-size: 12px; line-height: 14px; margin: 2px 5px; } .charitable-toggle-control .charitable-toggle-control-icon { background-color: #bbbbbb; border-radius: 8.5px; cursor: pointer; display: inline-block; height: 17px; margin: 0 1px; position: relative; text-indent: -9999px; width: 32px; } .charitable-toggle-control .charitable-toggle-control-icon:after { background: #ffffff; border-radius: 50%; content: ""; height: 15px; left: 2px; position: absolute; top: 1px; width: 13px; transition-property: all; transition-duration: 0.25s; transition-timing-function: ease-out; } .charitable-toggle-control:hover input:checked + label.charitable-toggle-control-icon { background-color: #215d8f; } .charitable-toggle-control:hover .charitable-toggle-control-icon { background-color: #777777; } /* Disabled toggle — dim everything and block interaction; pointer-events on labels so the user can't click them to toggle the input. */ .charitable-panel-field-toggle-disabled { opacity: 0.55; } .charitable-panel-field-toggle-disabled .charitable-toggle-control input[type=checkbox] { cursor: not-allowed; } .charitable-panel-field-toggle-disabled .charitable-toggle-control label { cursor: not-allowed; pointer-events: none; } .charitable-panel-field-toggle-disabled .charitable-toggle-control .charitable-toggle-control-icon { background-color: #c8ced4 !important; } .charitable-group.charitable-layout-options-tab-group .charitable-toggle-control-icon { margin: -4px 1px; } .charitable-panel-sidebar .charitable-toggle-control .charitable-toggle-control-icon { background-color: #b0b6bd; } .charitable-panel-sidebar .charitable-toggle-control:hover .charitable-toggle-control-icon { background-color: #86919e; } .charitable-panel-sidebar .charitable-toggle-control.charitable-field-option-in-label-right .charitable-toggle-control-label { color: #86919e; font-size: 12px; line-height: 14px; margin: 2px 5px; max-width: initial; } .charitable-field-option-group-toggle, .charitable-group-toggle { color: #444444; display: block; font-size: 15px; left: 270px; margin: 0; outline: 0; overflow: hidden; padding: 12px 12px 9px 12px; position: fixed; text-decoration: none; text-overflow: ellipsis; text-transform: capitalize; top: calc(124px + var(--charitable-admin-bar-height)); white-space: nowrap; z-index: 1; transition-property: top, width, left; transition-duration: 0.25s, 0.15s, 0.15s; transition-timing-function: ease-out; } .charitable-field-option-group-toggle:hover, .charitable-group-toggle:hover { color: #86919e; } .charitable-layout-options-tabs-toggle { color: #444444; display: block; font-size: 15px; left: 205px; margin: 0; outline: 0; overflow: hidden; padding: 12px 12px 9px 12px; position: fixed; text-decoration: none; text-overflow: ellipsis; text-transform: capitalize; top: calc(124px + var(--charitable-admin-bar-height)); white-space: nowrap; z-index: 1; transition-property: top, width, left; transition-duration: 0.25s, 0.15s, 0.15s; transition-timing-function: ease-out; } .charitable-layout-options-tabs-toggle:hover { color: #86919e; } .charitable-field-option-field-title { color: #444444; display: block; font-size: 15px; font-weight: 600; line-height: 18px; margin: 0 0 0 1px; outline: 0; padding: 20px 20px 0 20px; text-decoration: none; } .charitable-field-option-field-title span { color: #86919e; font-weight: 400; } .charitable-field-option-group-basic .charitable-field-option-group-toggle, .charitable-field-option-group-basic .charitable-group-toggle, .charitable-layout-options-tab-general .charitable-field-option-group-toggle, .charitable-layout-options-tab-general .charitable-group-toggle { left: 115px; max-width: 83px; } .charitable-field-option-group-advanced .charitable-field-option-group-toggle, .charitable-field-option-group-advanced .charitable-group-toggle, .charitable-layout-options-group-advanced .charitable-field-option-group-toggle, .charitable-layout-options-group-advanced .charitable-group-toggle { left: 192px; max-width: 99px; } .charitable-field-option-group-conditionals .charitable-field-option-group-toggle, .charitable-field-option-group-conditionals .charitable-group-toggle { left: 281px; max-width: 116px; } .charitable-panel-sidebar-closed .charitable-field-option-group-basic .charitable-field-option-group-toggle, .charitable-panel-sidebar-closed .charitable-field-option-group-basic .charitable-group-toggle { left: calc(115px - 400px); max-width: 83px; } .charitable-panel-sidebar-closed .charitable-field-option-group-advanced .charitable-field-option-group-toggle, .charitable-panel-sidebar-closed .charitable-field-option-group-advanced .charitable-group-toggle { left: calc(192px - 400px); max-width: 99px; } .charitable-panel-sidebar-closed .charitable-field-option-group-conditionals .charitable-field-option-group-toggle, .charitable-panel-sidebar-closed .charitable-field-option-group-conditionals .charitable-group-toggle { left: calc(281px - 400px); max-width: 116px; } .charitable-layout-options-tab.charitable-layout-options-tab-general { position: relative; } .charitable-field-option-group .charitable-field-option-group-inner, .charitable-field-option-group .charitable-layout-options-group-inner, .charitable-layout-options-tab .charitable-field-option-group-inner, .charitable-layout-options-tab .charitable-layout-options-group-inner { display: none; padding: 20px; } .charitable-field-option-group.active .charitable-field-option-group-toggle, .charitable-field-option-group.active .charitable-group-toggle, .charitable-layout-options-tab.active .charitable-field-option-group-toggle, .charitable-layout-options-tab.active .charitable-group-toggle { border-bottom: 3px solid #e27730; font-weight: 600; } .charitable-field-option-group.active .charitable-field-option-group-toggle:hover, .charitable-field-option-group.active .charitable-group-toggle:hover, .charitable-layout-options-tab.active .charitable-field-option-group-toggle:hover, .charitable-layout-options-tab.active .charitable-group-toggle:hover { color: #444444; } .charitable-field-option-group.active .charitable-field-option-group-inner, .charitable-field-option-group.active .charitable-layout-options-group-inner, .charitable-layout-options-tab.active .charitable-field-option-group-inner, .charitable-layout-options-tab.active .charitable-layout-options-group-inner { display: block; } .charitable-field-option-group button.charitable-tab-groups-add, .charitable-layout-options-tab button.charitable-tab-groups-add { margin-top: 20px; width: 100%; background-color: #EEEEEE; border: 1px solid #CFCFD2; color: #595B67; font-weight: 600; text-transform: capitalize; border-radius: 8px; } .charitable-field-option-group button.charitable-tab-groups-add:hover, .charitable-layout-options-tab button.charitable-tab-groups-add:hover { background-color: #d7d7d7; } .charitable-layout-options-group-inner-generic { display: none; padding: 20px; } #charitable-field-options:before { background-color: #ebf3fc; border-bottom: 1px solid #ced7e0; content: ""; display: block; height: 40px; left: 0; top: -39px; position: absolute; /* width: 360px; */ width: 100%; z-index: 10; transition-property: top, width, left; transition-duration: 0.25s, 0.15s, 0.15s; transition-timing-function: ease-out, ease-out, ease-in-out; } .charitable-panel-sidebar-closed #charitable-field-options:before { left: calc(115px - 400px); } .charitable-group { border-bottom: 1px solid #ced7e0; padding: 0 10px; } .charitable-group:first-of-type { margin-top: -20px; } .charitable-group:last-of-type { margin-bottom: 0; padding-bottom: 0; } .charitable-group.charitable-new-tab .charitable-general-layout-heading span { font-style: italic; } .charitable-group.active { background: #ffffff; } .charitable-group .charitable-tab-group-delete { margin-right: 10px; float: right; } .charitable-group .charitable-draggable { float: left; margin-right: 10px; } .charitable-group .charitable-general-layout-heading { color: #444444; display: block; font-size: 16px; font-weight: 600; margin: 0; outline: 0; overflow: hidden; padding: 20px 0; text-decoration: none; padding-top: 10px; } .charitable-group .charitable-general-layout-heading:hover { text-decoration: none; } .charitable-group .charitable-general-layout-heading:active, .charitable-group .charitable-general-layout-heading:focus { outline: 0; } .charitable-group .charitable-general-layout-heading i { color: #86919e; float: right; font-size: 20px; margin: -2px 0 0 0; transition-property: transform; transition-duration: 0.4s; transition-timing-function: ease-out; } .charitable-group .charitable-general-layout-heading i.charitable-angle-right { transform: rotate(-90deg); } .charitable-group .charitable-add-fields-buttons { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; overflow: hidden; } .charitable-group button.charitable-btn { background-color: #036aab; border: none; border-radius: 4px; color: #ffffff; display: block; margin: 16px 0 0 0; width: calc(50% - 8px); overflow: hidden; padding: 12px 5px 12px 14px; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .charitable-group button.charitable-btn:hover { background-color: #215d8f; cursor: pointer; } .charitable-group button.charitable-btn:disabled:hover, .charitable-group button.charitable-btn.ui-draggable-disabled:hover { background-color: #036aab; cursor: no-drop; } .charitable-group button.charitable-btn:nth-child(1), .charitable-group button.charitable-btn:nth-child(2) { margin-top: 0; } .charitable-group button.charitable-btn i { color: rgba(255, 255, 255, 0.6); display: inline-block; margin: 0 7px 0 0; } #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container { display: table; clear: all; } #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-avatar { max-width: 150px; float: left; } #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-avatar img { border: 1px solid black; padding: 5px; margin: 5px; } #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-info { float: left; margin: 0 20px; } #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-info ul { margin: 5px 0; padding: 0; } #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-info ul li { display: inline-block; border-right: 1px solid #cccccc; margin-left: 5px; margin-right: 5px; padding-left: 5px; padding-right: 5px; } #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-info ul li:first-child { margin-left: 0; padding-left: 0; } #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-info ul li:last-child { border-right: 0; margin-right: 0; padding-right: 0; margin-left: 0; padding-left: 0; }