#wpforms-builder .wpforms-toolbar {
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
top: var(--wpforms-admin-bar-height);
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition-property: top;
transition-duration: 0.25s;
transition-timing-function: ease-out;
#wpforms-builder .wpforms-toolbar .wpforms-left {
border-inline-end: 1px solid #dddddd;
#wpforms-builder .wpforms-toolbar .wpforms-left img {
#wpforms-builder .wpforms-toolbar .wpforms-center {
margin-inline-end: 520px;
margin-inline-start: 114px;
max-width: calc( 100% - 500px);
#wpforms-builder .wpforms-toolbar .wpforms-center-form-name-prefix {
#wpforms-builder .wpforms-toolbar .wpforms-center-form-name {
#wpforms-builder .wpforms-toolbar .wpforms-center-form-name:hover {
text-decoration: underline;
#wpforms-builder .wpforms-toolbar .wpforms-center-form-template-badge {
background-color: #fdf2eb;
text-transform: uppercase;
#wpforms-builder .wpforms-toolbar .wpforms-form-name {
#wpforms-builder .wpforms-toolbar .wpforms-right {
justify-content: flex-end;
#wpforms-builder .wpforms-toolbar .wpforms-right .wpforms-btn-toolbar {
text-transform: capitalize;
#wpforms-builder .wpforms-toolbar .wpforms-right .wpforms-btn-toolbar i {
#wpforms-builder .wpforms-toolbar #wpforms-help,
#wpforms-builder .wpforms-toolbar #wpforms-context-menu-container {
background-color: transparent;
#wpforms-builder .wpforms-toolbar #wpforms-help i.fa,
#wpforms-builder .wpforms-toolbar #wpforms-context-menu-container i.fa {
margin-right: 0 !important;
#wpforms-builder .wpforms-toolbar #wpforms-help svg,
#wpforms-builder .wpforms-toolbar #wpforms-context-menu-container svg {
#wpforms-builder .wpforms-toolbar #wpforms-help .wpforms-context-menu-list-item-icon svg,
#wpforms-builder .wpforms-toolbar #wpforms-context-menu-container .wpforms-context-menu-list-item-icon svg {
#wpforms-builder .wpforms-toolbar #wpforms-help .wpforms-context-menu-list-item-icon svg path,
#wpforms-builder .wpforms-toolbar #wpforms-context-menu-container .wpforms-context-menu-list-item-icon svg path {
fill: rgba(255, 255, 255, 0.75);
#wpforms-builder .wpforms-toolbar #wpforms-help:hover > i.fa,
#wpforms-builder .wpforms-toolbar #wpforms-help:hover > svg, #wpforms-builder .wpforms-toolbar #wpforms-help.wpforms-context-menu-active > i.fa,
#wpforms-builder .wpforms-toolbar #wpforms-help.wpforms-context-menu-active > svg,
#wpforms-builder .wpforms-toolbar #wpforms-context-menu-container:hover > i.fa,
#wpforms-builder .wpforms-toolbar #wpforms-context-menu-container:hover > svg,
#wpforms-builder .wpforms-toolbar #wpforms-context-menu-container.wpforms-context-menu-active > i.fa,
#wpforms-builder .wpforms-toolbar #wpforms-context-menu-container.wpforms-context-menu-active > svg {
#wpforms-builder .wpforms-toolbar #wpforms-preview-btn:not(.wpforms-alone) {
border-end-end-radius: 0;
border-start-end-radius: 0;
#wpforms-builder .wpforms-toolbar #wpforms-embed {
border-end-start-radius: 0;
border-start-start-radius: 0;
#wpforms-builder .wpforms-toolbar #wpforms-embed.wpforms-btn-light-grey-disabled {
#wpforms-builder .wpforms-toolbar #wpforms-embed.wpforms-btn-light-grey-disabled:hover {
background-color: #f8f8f8;
#wpforms-builder .wpforms-toolbar #wpforms-embed.wpforms-btn-light-grey-disabled > * {
#wpforms-builder .wpforms-toolbar #wpforms-save i {
color: rgba(255, 255, 255, 0.65);
#wpforms-builder .wpforms-toolbar #wpforms-exit {
background-color: #ffffff;
border-inline-start: 1px solid #dddddd;
#wpforms-builder .wpforms-toolbar #wpforms-exit:hover {
background-color: #f8f8f8;
#wpforms-builder .wpforms-toolbar.empty .wpforms-center {
#wpforms-builder .wpforms-toolbar.empty .wpforms-right #wpforms-embed,
#wpforms-builder .wpforms-toolbar.empty .wpforms-right #wpforms-save,
#wpforms-builder .wpforms-toolbar.empty .wpforms-right div,
#wpforms-builder .wpforms-toolbar.empty .wpforms-right a {
min-height: calc( 100vh - 76px - var( --wpforms-admin-bar-height ));
max-height: calc( 100vh - 76px - var( --wpforms-admin-bar-height ));
margin-inline-end: -100px;
top: var(--wpforms-admin-bar-height);
transform: translateZ(0);
transition-property: top;
transition-duration: 0.25s;
transition-timing-function: ease-out;
.wpforms-panels-toggle button {
border-bottom: 1px solid #444444;
.wpforms-panels-toggle button.active, .wpforms-panels-toggle button.active:hover {
background-color: #e27730;
.wpforms-panels-toggle button.active .fa, .wpforms-panels-toggle button.active:hover .fa {
.wpforms-panels-toggle button:hover {
background-color: #444444;
.wpforms-panels-toggle button .fa {
text-align: center !important;
.wpforms-panels-toggle button .wpforms-loading-spinner {
background-size: 26px 26px;
background-repeat: no-repeat;
margin: 2px auto 7px auto;
.wpforms-panels-toggle button span {
.wpforms-panel-full-content .wpforms-panel-content-wrap,
.wpforms-panel-sidebar-content .wpforms-panel-content-wrap {
background-color: #6d6d6d;
inset-inline-start: 95px;
padding-block-start: 30px;
padding-inline-start: 30px;
padding-inline-end: 30px;
top: calc( 76px + var( --wpforms-admin-bar-height ));
transition-property: top, inset-inline-start;
transition-duration: 0.25s, 0.15s;
transition-timing-function: ease-out, ease-in-out;
.wpforms-panel-full-content .wpforms-panel-content,
.wpforms-panel-sidebar-content .wpforms-panel-content {
background-color: #ffffff;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
.wpforms-panel-full-content .wpforms-panel-content .wpforms-bottom,
.wpforms-panel-sidebar-content .wpforms-panel-content .wpforms-bottom {
.wpforms-panel-sidebar-content .wpforms-panel-sidebar-toggle-icon {
background-image: url(../../images/builder/toggle-tab-bg.svg);
background-size: 100% 58px;
background-repeat: no-repeat;
border-radius: 5px 5px 0 0;
inset-inline-start: 495px;
transition-property: inset-inline-start, width;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
.wpforms-panel-sidebar-content .wpforms-panel-sidebar-toggle-icon:hover {
.wpforms-panel-sidebar-content .wpforms-panel-sidebar-toggle-icon:hover i {
inset-inline-start: -3px;
.rtl .wpforms-panel-sidebar-content .wpforms-panel-sidebar-toggle-icon {
.wpforms-panel-sidebar-content .wpforms-panel-sidebar-toggle-icon i {
transition-property: transform, inset-inline-start;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
.wpforms-panel-sidebar-content .wpforms-panel-content-wrap {
inset-inline-start: 495px;
.wpforms-panel-sidebar-content .wpforms-panel-sidebar {
background-color: #ebf3fc;
inset-inline-start: 95px;
top: calc( 76px + var( --wpforms-admin-bar-height ));
#wpforms-panel-fields .wpforms-panel-sidebar-content.wpforms-panel-sidebar-closed .wpforms-panel-sidebar-toggle-vertical-line {
border-inline-end: 3px solid #ebf3fb;
top: calc( 76px + var( --wpforms-admin-bar-height ));
inset-inline-start: 95px;
transition-property: z-index;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
#wpforms-panel-fields .wpforms-panel-sidebar-content.wpforms-panel-sidebar-closed .wpforms-panel-sidebar-toggle-vertical-line:hover {
#wpforms-panel-fields .wpforms-panel-sidebar-content.wpforms-panel-sidebar-closed .wpforms-panel-sidebar-toggle-icon {
inset-inline-start: 95px;
#wpforms-panel-fields .wpforms-panel-sidebar-content.wpforms-panel-sidebar-closed .wpforms-panel-sidebar-toggle-icon i {
transform: rotate(180deg);
#wpforms-panel-fields .wpforms-panel-sidebar-content.wpforms-panel-sidebar-closed .wpforms-panel-sidebar,
#wpforms-panel-fields .wpforms-panel-sidebar-content.wpforms-panel-sidebar-closed .wpforms-panel-sidebar .wpforms-tabs {
inset-inline-start: -305px;
#wpforms-panel-fields .wpforms-panel-sidebar-content.wpforms-panel-sidebar-closed .wpforms-panel-content-wrap {
inset-inline-start: 95px;
#wpforms-panel-fields .wpforms-panel-sidebar-content.wpforms-panel-sidebar-closed .wpforms-panel-sidebar-toggle:hover .wpforms-panel-sidebar-toggle-vertical-line {
#wpforms-panel-fields .wpforms-panel-sidebar-content.wpforms-panel-sidebar-closed .wpforms-panel-sidebar-toggle:hover .wpforms-panel-sidebar-toggle-icon {
#wpforms-panel-fields .wpforms-panel-sidebar-content.wpforms-panel-sidebar-closed .wpforms-panel-sidebar-toggle:hover .wpforms-panel-sidebar-toggle-icon i {
.wpforms-panel-corrupted-data .wpforms-panel-content-wrap {
inset-inline-start: 95px;
.wpforms-panel-corrupted-data .wpforms-builder-preview-corrupted-data-content .wpforms-builder-corrupted-data-title {
border-bottom: 1px solid #dddddd;
.wpforms-panel-corrupted-data .wpforms-builder-preview-corrupted-data-content .wpforms-builder-corrupted-data-title h2 {
.wpforms-panel-corrupted-data .wpforms-builder-preview-corrupted-data-content p {
.wpforms-panel-field.wide, .wpforms-panel-field.wpforms-panel-field-tinymce, .wpforms-panel-field.wpforms-panel-field-warning, .wpforms-panel-field[id$="-redirect-wrap"] {
.wpforms-panel-field input[type=text],
.wpforms-panel-field textarea {
.wpforms-panel-field input[type=number] {
.wpforms-panel-field select {
.wpforms-panel-field input[type=number] {
.wpforms-panel-field .row {
.wpforms-panel-field label {
vertical-align: text-top;
.wpforms-panel-field label.inline {