Page Builder by SiteOrigin - Version 2.8.0

Version Description

  • 06 August 2018 =
  • SiteOrigin Layouts Gutenberg block!
Download this release

Release Info

Developer gpriday
Plugin Icon 128x128 Page Builder by SiteOrigin
Version 2.8.0
Comparing to
See all releases

Code changes from version 2.7.3 to 2.8.0

compat/gutenberg-block.php ADDED
@@ -0,0 +1,87 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ class SiteOrigin_Panels_Compat_Gutenberg_Block {
4
+
5
+ const BLOCK_NAME = 'siteorigin-panels/layout-block';
6
+
7
+ /**
8
+ * Get the singleton instance
9
+ *
10
+ * @return SiteOrigin_Panels_Compat_Gutenberg_Block
11
+ */
12
+ public static function single() {
13
+ static $single;
14
+
15
+ return empty( $single ) ? $single = new self() : $single;
16
+ }
17
+
18
+ public function __construct() {
19
+ add_action( 'init', array( $this, 'register_layout_block' ) );
20
+ add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_layout_block_editor_assets' ) );
21
+ }
22
+
23
+ public function register_layout_block() {
24
+ register_block_type( self::BLOCK_NAME, array(
25
+ 'render_callback' => array( $this, 'render_layout_block' ),
26
+ ) );
27
+ }
28
+
29
+ public function enqueue_layout_block_editor_assets() {
30
+ $panels_admin = SiteOrigin_Panels_Admin::single();
31
+ $panels_admin->enqueue_admin_scripts();
32
+ $panels_admin->enqueue_admin_styles();
33
+ $panels_admin->js_templates();
34
+
35
+ wp_enqueue_script(
36
+ 'siteorigin-panels-layout-block',
37
+ plugins_url( 'js/siteorigin-panels-layout-block' . SITEORIGIN_PANELS_JS_SUFFIX . '.js', __FILE__ ),
38
+ array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-components', 'so-panels-admin' ),
39
+ SITEORIGIN_PANELS_VERSION
40
+ );
41
+ wp_localize_script(
42
+ 'siteorigin-panels-layout-block',
43
+ 'soPanelsGutenbergAdmin',
44
+ array(
45
+ 'previewUrl' => wp_nonce_url( admin_url( 'admin-ajax.php' ), 'gutenberg-preview', '_panelsnonce' ),
46
+ )
47
+ );
48
+ SiteOrigin_Panels_Styles::register_scripts();
49
+ wp_enqueue_script( 'siteorigin-panels-front-styles' );
50
+
51
+ // Enqueue front end scripts for our widgets bundle.
52
+ if ( class_exists( 'SiteOrigin_Widgets_Bundle' ) ) {
53
+ $sowb = SiteOrigin_Widgets_Bundle::single();
54
+ $sowb->register_general_scripts();
55
+
56
+ global $wp_widget_factory;
57
+
58
+ foreach ( $wp_widget_factory->widgets as $class => $widget_obj ) {
59
+ if ( ! empty( $widget_obj ) && is_object( $widget_obj ) && is_subclass_of( $widget_obj, 'SiteOrigin_Widget' ) ) {
60
+ /* @var $widget_obj SiteOrigin_Widget */
61
+ ob_start();
62
+ $widget_obj->widget( array(), array() );
63
+ ob_clean();
64
+ }
65
+ }
66
+ }
67
+ }
68
+
69
+ public function render_layout_block( $attributes ) {
70
+ if ( empty( $attributes['panelsData'] ) ) {
71
+ return '<div>'.
72
+ __( "You need to add a widget, row, or prebuilt layout before you'll see anything here. :)", 'siteorigin-panels' ) .
73
+ '</div>';
74
+ }
75
+ $panels_data = $attributes['panelsData'];
76
+ $panels_data = $this->sanitize_panels_data( $panels_data );
77
+ $builder_id = isset( $attributes['builder_id'] ) ? $attributes['builder_id'] : uniqid( 'gb' . get_the_ID() . '-' );
78
+ $rendered_layout = SiteOrigin_Panels::renderer()->render( $builder_id, true, $panels_data );
79
+ return $rendered_layout;
80
+ }
81
+
82
+ private function sanitize_panels_data( $panels_data ) {
83
+ $panels_data['widgets'] = SiteOrigin_Panels_Admin::single()->process_raw_widgets( $panels_data['widgets'], false, true );
84
+ $panels_data = SiteOrigin_Panels_Styles_Admin::single()->sanitize_all( $panels_data );
85
+ return $panels_data;
86
+ }
87
+ }
compat/js/siteorigin-panels-layout-block.js ADDED
@@ -0,0 +1,205 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ( function ( editor, blocks, i18n, element, components ) {
2
+
3
+ var el = element.createElement;
4
+ var BlockControls = editor.BlockControls;
5
+ var withState = components.withState;
6
+ var Toolbar = components.Toolbar;
7
+ var IconButton = components.IconButton;
8
+ var Spinner = components.Spinner;
9
+ var __ = i18n.__;
10
+
11
+ blocks.registerBlockType( 'siteorigin-panels/layout-block', {
12
+ title: __( 'SiteOrigin Layout (in beta)' ),
13
+
14
+ description: __( "Build a layout using SiteOrigin's Page Builder." ),
15
+
16
+ icon: function() {
17
+ return el(
18
+ 'span',
19
+ {
20
+ className: 'siteorigin-panels-gutenberg-icon'
21
+ }
22
+ )
23
+ },
24
+
25
+ category: 'layout',
26
+
27
+ supports: {
28
+ html: false,
29
+ },
30
+
31
+ attributes: {
32
+ panelsData: {
33
+ type: 'object',
34
+ }
35
+ },
36
+
37
+ edit: withState( {
38
+ editing: true,
39
+ panelsInitialized: false,
40
+ loadingPreview: false,
41
+ previewHtml: ''
42
+ } )( function ( props ) {
43
+ var editing = props.editing;
44
+ var loadingPreview = props.loadingPreview;
45
+ function fetchPreview() {
46
+ if ( props.attributes.panelsData ) {
47
+ $.post( soPanelsGutenbergAdmin.previewUrl, {
48
+ action: 'so_panels_gutenberg_preview',
49
+ panelsData: JSON.stringify( props.attributes.panelsData ),
50
+ } ).then( function( result ) {
51
+ if ( result.html ) {
52
+ props.setState( { previewHtml: result.html, loadingPreview: false } );
53
+ }
54
+ });
55
+ props.setState( { editing: false, loadingPreview: true } );
56
+ }
57
+ }
58
+
59
+ function setupPreview() {
60
+ if ( ! editing ) {
61
+ $( document ).trigger( 'panels_setup_preview' );
62
+ if ( window.sowb ) {
63
+ $ ( window.sowb ).trigger( 'setup_widgets' );
64
+ }
65
+ }
66
+ }
67
+
68
+ function showEdit() {
69
+ props.setState( { editing: true, panelsInitialized: false } );
70
+ }
71
+
72
+ function setupPanels( panelsContainer ) {
73
+ if ( ! props.panelsInitialized ) {
74
+ var $panelsContainer = jQuery( panelsContainer );
75
+
76
+ var config = {
77
+ editorType: 'standalone'
78
+ };
79
+
80
+ var builderModel = new panels.model.builder();
81
+
82
+ var builderView = new panels.view.builder( {
83
+ model: builderModel,
84
+ config: config
85
+ } );
86
+
87
+ // Make sure panelsData is defined and clone so that we don't alter the underlying attribute.
88
+ var panelsData = JSON.parse( JSON.stringify( $.extend( {}, props.attributes.panelsData ) ) );
89
+
90
+ // Disable Gutenberg block selection while dragging rows or widgets.
91
+ function disableSelection() {
92
+ props.toggleSelection( false );
93
+ $( document ).on( 'mouseup', function enableSelection() {
94
+ props.toggleSelection( true );
95
+ $( document ).off( 'mouseup', enableSelection );
96
+ } );
97
+ }
98
+
99
+ builderView.on( 'row_added', function() {
100
+ builderView.$( '.so-row-move' ).off( 'mousedown', disableSelection );
101
+ builderView.$( '.so-row-move' ).on( 'mousedown', disableSelection );
102
+ builderView.$( '.so-widget' ).off( 'mousedown', disableSelection );
103
+ builderView.$( '.so-widget' ).on( 'mousedown', disableSelection );
104
+ } );
105
+
106
+ builderView.on( 'widget_added', function() {
107
+ builderView.$( '.so-widget' ).off( 'mousedown', disableSelection );
108
+ builderView.$( '.so-widget' ).on( 'mousedown', disableSelection );
109
+ } );
110
+
111
+ builderView
112
+ .render()
113
+ .attach( {
114
+ container: $panelsContainer
115
+ } )
116
+ .setData( panelsData );
117
+
118
+ builderView.trigger( 'builder_resize' );
119
+
120
+ builderView.on( 'content_change', function () {
121
+ props.setAttributes( { panelsData: builderView.getData() } );
122
+ } );
123
+
124
+ $( document ).trigger( 'panels_setup', builderView );
125
+
126
+ props.setState( { panelsInitialized: true } );
127
+ }
128
+ }
129
+ if ( editing ) {
130
+ return [
131
+ el(
132
+ BlockControls,
133
+ { key: 'controls' },
134
+ el(
135
+ Toolbar,
136
+ null,
137
+ el(
138
+ IconButton,
139
+ {
140
+ className: 'components-icon-button components-toolbar__control',
141
+ label: __( 'Preview layout.' ),
142
+ onClick: fetchPreview,
143
+ icon: 'visibility'
144
+ }
145
+ )
146
+ )
147
+ ),
148
+ el( 'div', {
149
+ key: 'pageBuilder',
150
+ className: 'siteorigin-panels-layout-block-container',
151
+ ref: setupPanels,
152
+ } )
153
+ ];
154
+ } else {
155
+ var preview = props.previewHtml;
156
+ return [
157
+ el(
158
+ BlockControls,
159
+ { key: 'controls' },
160
+ el(
161
+ Toolbar,
162
+ null,
163
+ el(
164
+ IconButton,
165
+ {
166
+ className: 'components-icon-button components-toolbar__control',
167
+ label: __( 'Edit layout.' ),
168
+ onClick: showEdit,
169
+ icon: 'edit'
170
+ }
171
+ )
172
+ )
173
+ ),
174
+ el(
175
+ 'div',
176
+ {
177
+ key: 'preview',
178
+ className: 'so-panels-gutenberg-layout-preview-container'
179
+ },
180
+ ( loadingPreview ?
181
+ el( 'div', {
182
+ className: 'so-panels-spinner-container'
183
+ },
184
+ el(
185
+ 'span',
186
+ null,
187
+ el( Spinner )
188
+ )
189
+ ) :
190
+ el( 'div', {
191
+ dangerouslySetInnerHTML: { __html: preview },
192
+ ref: setupPreview,
193
+ } )
194
+ )
195
+ )
196
+ ];
197
+ }
198
+ } ),
199
+
200
+ save: function () {
201
+ // Render in PHP
202
+ return null;
203
+ }
204
+ } );
205
+ } )( window.wp.editor, window.wp.blocks, window.wp.i18n, window.wp.element, window.wp.components );
compat/js/siteorigin-panels-layout-block.min.js ADDED
@@ -0,0 +1 @@
 
1
+ !function(e,n,t,o,i){var a=o.createElement,s=e.BlockControls,l=i.withState,r=i.Toolbar,u=i.IconButton,d=i.Spinner,c=t.__;n.registerBlockType("siteorigin-panels/layout-block",{title:c("SiteOrigin Layout (in beta)"),description:c("Build a layout using SiteOrigin's Page Builder."),icon:function(){return a("span",{className:"siteorigin-panels-gutenberg-icon"})},category:"layout",supports:{html:!1},attributes:{panelsData:{type:"object"}},edit:l({editing:!0,panelsInitialized:!1,loadingPreview:!1,previewHtml:""})(function(e){function n(){e.attributes.panelsData&&($.post(soPanelsGutenbergAdmin.previewUrl,{action:"so_panels_gutenberg_preview",panelsData:JSON.stringify(e.attributes.panelsData)}).then(function(n){n.html&&e.setState({previewHtml:n.html,loadingPreview:!1})}),e.setState({editing:!1,loadingPreview:!0}))}function t(){l||($(document).trigger("panels_setup_preview"),window.sowb&&$(window.sowb).trigger("setup_widgets"))}function o(){e.setState({editing:!0,panelsInitialized:!1})}function i(n){function t(){e.toggleSelection(!1),$(document).on("mouseup",function n(){e.toggleSelection(!0),$(document).off("mouseup",n)})}if(!e.panelsInitialized){var o=jQuery(n),i={editorType:"standalone"},a=new panels.model.builder,s=new panels.view.builder({model:a,config:i}),l=JSON.parse(JSON.stringify($.extend({},e.attributes.panelsData)));s.on("row_added",function(){s.$(".so-row-move").off("mousedown",t),s.$(".so-row-move").on("mousedown",t),s.$(".so-widget").off("mousedown",t),s.$(".so-widget").on("mousedown",t)}),s.on("widget_added",function(){s.$(".so-widget").off("mousedown",t),s.$(".so-widget").on("mousedown",t)}),s.render().attach({container:o}).setData(l),s.trigger("builder_resize"),s.on("content_change",function(){e.setAttributes({panelsData:s.getData()})}),$(document).trigger("panels_setup",s),e.setState({panelsInitialized:!0})}}var l=e.editing,p=e.loadingPreview;if(l)return[a(s,{key:"controls"},a(r,null,a(u,{className:"components-icon-button components-toolbar__control",label:c("Preview layout."),onClick:n,icon:"visibility"}))),a("div",{key:"pageBuilder",className:"siteorigin-panels-layout-block-container",ref:i})];var w=e.previewHtml;return[a(s,{key:"controls"},a(r,null,a(u,{className:"components-icon-button components-toolbar__control",label:c("Edit layout."),onClick:o,icon:"edit"}))),a("div",{key:"preview",className:"so-panels-gutenberg-layout-preview-container"},p?a("div",{className:"so-panels-spinner-container"},a("span",null,a(d))):a("div",{dangerouslySetInnerHTML:{__html:w},ref:t}))]}),save:function(){return null}})}(window.wp.editor,window.wp.blocks,window.wp.i18n,window.wp.element,window.wp.components);
compat/pb-icon.svg ADDED
@@ -0,0 +1 @@
 
1
+ <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 703.29 745.09"><defs><style>.cls-1{opacity:0.5;}.cls-2{opacity:0.2;}</style></defs><title>pb-icon</title><path d="M731.52,232.52,397,430.73a17.11,17.11,0,0,1-17.45,0L45,232.52a17.12,17.12,0,0,1,0-29.46L379.54,4.85a17.11,17.11,0,0,1,17.45,0L731.52,203.06A17.12,17.12,0,0,1,731.52,232.52Z" transform="translate(-36.62 -2.46)"/><path class="cls-1" d="M731.52,399.94,397,598.15a17.11,17.11,0,0,1-17.45,0L45,399.94a17.12,17.12,0,0,1,0-29.46L379.54,172.27a17.11,17.11,0,0,1,17.45,0L731.52,370.48A17.12,17.12,0,0,1,731.52,399.94Z" transform="translate(-36.62 -2.46)"/><path class="cls-2" d="M731.52,546.94,397,745.15a17.11,17.11,0,0,1-17.45,0L45,546.94a17.12,17.12,0,0,1,0-29.46L379.54,319.27a17.11,17.11,0,0,1,17.45,0L731.52,517.48A17.12,17.12,0,0,1,731.52,546.94Z" transform="translate(-36.62 -2.46)"/></svg>
css/admin.css CHANGED
@@ -335,6 +335,7 @@
335
  zoom: 1;
336
  margin: 0 -5px;
337
  position: relative;
 
338
  }
339
  .siteorigin-panels-builder .so-rows-container .so-row-container .so-cells:before {
340
  content: '';
@@ -363,7 +364,6 @@
363
  -moz-box-sizing: border-box;
364
  -webkit-box-sizing: border-box;
365
  box-sizing: border-box;
366
- float: left;
367
  position: relative;
368
  padding: 0 5px;
369
  }
@@ -740,18 +740,27 @@
740
  padding-right: 15px;
741
  margin: 0 -15px;
742
  }
743
- .so-panels-dialog {
 
744
  /* The add widget dialog */
745
  /* The row edit dialog */
746
  /* For prebuilt layouts */
747
- /* Special case of the builder interface being inside a dialog */
 
 
748
  }
749
  .so-panels-dialog .so-overlay,
 
750
  .so-panels-dialog .so-content,
 
751
  .so-panels-dialog .so-title-bar,
 
752
  .so-panels-dialog .so-toolbar,
 
753
  .so-panels-dialog .so-left-sidebar,
754
- .so-panels-dialog .so-right-sidebar {
 
 
755
  z-index: 100001;
756
  position: fixed;
757
  -ms-box-sizing: border-box;
@@ -761,18 +770,23 @@
761
  padding: 15px;
762
  }
763
  .so-panels-dialog .so-content,
 
764
  .so-panels-dialog .so-left-sidebar,
765
- .so-panels-dialog .so-right-sidebar {
 
 
766
  overflow-y: auto;
767
  }
768
- .so-panels-dialog .so-overlay {
 
769
  top: 0;
770
  left: 0;
771
  right: 0;
772
  bottom: 0;
773
  background: rgba(0, 0, 0, 0.5);
774
  }
775
- .so-panels-dialog .so-content {
 
776
  top: 80px;
777
  left: 30px;
778
  right: 30px;
@@ -783,16 +797,20 @@
783
  -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.03);
784
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.03);
785
  }
786
- .so-panels-dialog .so-content > *:first-child {
 
787
  margin-top: 0;
788
  }
789
- .so-panels-dialog .so-content > *:last-child {
 
790
  margin-bottom: 0;
791
  }
792
- .so-panels-dialog .so-content .so-content-tabs > * {
 
793
  display: none;
794
  }
795
- .so-panels-dialog .so-title-bar {
 
796
  left: 30px;
797
  right: 30px;
798
  top: 30px;
@@ -801,7 +819,8 @@
801
  border-bottom: 1px solid #D8D8D8;
802
  /* These are the action buttons in the title bar */
803
  }
804
- .so-panels-dialog .so-title-bar h3.so-title {
 
805
  -ms-box-sizing: border-box;
806
  -moz-box-sizing: border-box;
807
  -webkit-box-sizing: border-box;
@@ -811,16 +830,20 @@
811
  display: block;
812
  }
813
  .so-panels-dialog .so-title-bar h3.so-title.so-title-editable:hover,
814
- .so-panels-dialog .so-title-bar h3.so-title.so-title-editable:focus {
 
 
815
  outline: none;
816
  background-color: #F0F0F0;
817
  }
818
- .so-panels-dialog .so-title-bar h3.so-title.so-title-editable:focus {
 
819
  margin-top: -4px;
820
  margin-left: -4px;
821
  border: 1px solid #E4E4E4;
822
  }
823
- .so-panels-dialog .so-title-bar input[type=text].so-edit-title {
 
824
  margin-top: -3px;
825
  margin-left: -3px;
826
  display: none;
@@ -832,14 +855,16 @@
832
  background-color: #F0F0F0;
833
  padding: 4px 5px;
834
  }
835
- .so-panels-dialog .so-title-bar h3.so-parent-link {
 
836
  cursor: pointer;
837
  position: relative;
838
  float: left;
839
  margin: 0 15px 0 0 !important;
840
  padding: 0 27px 0 0 !important;
841
  }
842
- .so-panels-dialog .so-title-bar h3.so-parent-link .so-separator {
 
843
  position: absolute;
844
  top: -15px;
845
  right: 0;
@@ -849,12 +874,14 @@
849
  background: url(images/dialog-separator.png) no-repeat;
850
  }
851
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
852
- .so-panels-dialog .so-title-bar h3.so-parent-link .so-separator {
 
853
  background: url(images/dialog-separator@2x.png) no-repeat;
854
  background-size: cover;
855
  }
856
  }
857
- .so-panels-dialog .so-title-bar a {
 
858
  cursor: pointer;
859
  position: absolute;
860
  box-sizing: border-box;
@@ -872,13 +899,16 @@
872
  border-bottom: 1px solid #d8d8d8;
873
  /* Disabled nav */
874
  }
875
- .so-panels-dialog .so-title-bar a:hover {
 
876
  background: #e9e9e9;
877
  }
878
- .so-panels-dialog .so-title-bar a:hover .so-dialog-icon {
 
879
  color: #333333;
880
  }
881
- .so-panels-dialog .so-title-bar a .so-dialog-icon {
 
882
  position: absolute;
883
  top: 50%;
884
  left: 50%;
@@ -890,40 +920,51 @@
890
  color: #666666;
891
  text-align: center;
892
  }
893
- .so-panels-dialog .so-title-bar a .so-dialog-icon:before {
 
894
  font: 400 20px/1em dashicons;
895
  top: 7px;
896
  left: 13px;
897
  }
898
- .so-panels-dialog .so-title-bar a.so-close {
 
899
  right: 0;
900
  }
901
- .so-panels-dialog .so-title-bar a.so-close .so-dialog-icon:before {
 
902
  content: "\f335";
903
  }
904
- .so-panels-dialog .so-title-bar a.so-next {
 
905
  right: 50px;
906
  }
907
- .so-panels-dialog .so-title-bar a.so-next .so-dialog-icon:before {
 
908
  content: '\f345';
909
  }
910
- .so-panels-dialog .so-title-bar a.so-previous {
 
911
  right: 100px;
912
  }
913
- .so-panels-dialog .so-title-bar a.so-previous .so-dialog-icon:before {
 
914
  content: '\f341';
915
  }
916
- .so-panels-dialog .so-title-bar a.so-nav.so-disabled {
 
917
  cursor: default;
918
  pointer-events: none;
919
  }
920
- .so-panels-dialog .so-title-bar a.so-nav.so-disabled .so-dialog-icon {
 
921
  color: #dddddd;
922
  }
923
- .so-panels-dialog .so-title-bar.so-has-icon {
 
924
  padding-left: 45px;
925
  }
926
- .so-panels-dialog .so-title-bar.so-has-icon .so-panels-icon {
 
927
  position: absolute;
928
  top: 14.5px;
929
  left: 14px;
@@ -935,7 +976,8 @@
935
  text-align: center;
936
  color: #666;
937
  }
938
- .so-panels-dialog .so-toolbar {
 
939
  left: 30px;
940
  right: 30px;
941
  bottom: 30px;
@@ -944,7 +986,8 @@
944
  border-top: 1px solid #D8D8D8;
945
  z-index: 100002;
946
  }
947
- .so-panels-dialog .so-toolbar .so-status {
 
948
  float: left;
949
  padding-top: 6px;
950
  padding-bottom: 6px;
@@ -952,26 +995,31 @@
952
  color: #999999;
953
  line-height: 1em;
954
  }
955
- .so-panels-dialog .so-toolbar .so-status.so-panels-loading {
 
956
  padding-left: 26px;
957
  background-position: left center;
958
  }
959
- .so-panels-dialog .so-toolbar .so-status .dashicons-warning {
 
960
  color: #aa0000;
961
  vertical-align: middle;
962
  margin-right: 7px;
963
  margin-top: -1px;
964
  }
965
- .so-panels-dialog .so-toolbar .so-buttons {
 
966
  float: right;
967
  }
968
- .so-panels-dialog .so-toolbar .so-buttons .action-buttons {
 
969
  position: absolute;
970
  left: 15px;
971
  top: 50%;
972
  margin-top: -0.65em;
973
  }
974
- .so-panels-dialog .so-toolbar .so-buttons .action-buttons a {
 
975
  cursor: pointer;
976
  display: inline;
977
  padding: 0.2em 0.5em;
@@ -979,21 +1027,27 @@
979
  margin-right: 0.5em;
980
  text-decoration: none;
981
  }
982
- .so-panels-dialog .so-toolbar .so-buttons .action-buttons .so-delete {
 
983
  color: #a00;
984
  }
985
- .so-panels-dialog .so-toolbar .so-buttons .action-buttons .so-delete:hover {
 
986
  background: #a00;
987
  color: #FFFFFF;
988
  }
989
- .so-panels-dialog .so-toolbar .so-buttons .action-buttons .so-duplicate:hover {
 
990
  text-decoration: underline;
991
  }
992
  .so-panels-dialog .so-left-sidebar,
993
- .so-panels-dialog .so-right-sidebar {
 
 
994
  background-color: #f3f3f3;
995
  }
996
- .so-panels-dialog .so-left-sidebar {
 
997
  display: none;
998
  top: 30px;
999
  left: 30px;
@@ -1001,41 +1055,50 @@
1001
  width: 290px;
1002
  border-right: 1px solid #D8D8D8;
1003
  }
1004
- .so-panels-dialog .so-left-sidebar h4 {
 
1005
  margin: 0 0 20px 0;
1006
  font-size: 18px;
1007
  }
1008
- .so-panels-dialog .so-left-sidebar .so-sidebar-search {
 
1009
  width: 100%;
1010
  padding: 6px;
1011
  margin-bottom: 20px;
1012
  }
1013
- .so-panels-dialog .so-left-sidebar .so-sidebar-tabs {
 
1014
  list-style: none;
1015
  margin: 0 -15px;
1016
  }
1017
- .so-panels-dialog .so-left-sidebar .so-sidebar-tabs li {
 
1018
  margin-bottom: 0;
1019
  }
1020
- .so-panels-dialog .so-left-sidebar .so-sidebar-tabs li a {
 
1021
  padding: 7px 16px;
1022
  display: block;
1023
  font-size: 14px;
1024
  text-decoration: none;
1025
  box-shadow: none !important;
1026
  }
1027
- .so-panels-dialog .so-left-sidebar .so-sidebar-tabs li a:hover {
 
1028
  background: #FFFFFF;
1029
  }
1030
- .so-panels-dialog .so-left-sidebar .so-sidebar-tabs li.tab-active a {
 
1031
  color: #555;
1032
  font-weight: bold;
1033
  background: #FFFFFF;
1034
  }
1035
- .so-panels-dialog .so-left-sidebar .so-sidebar-tabs li.tab-active a:hover {
 
1036
  background: #FFFFFF;
1037
  }
1038
- .so-panels-dialog .so-right-sidebar {
 
1039
  display: none;
1040
  top: 80px;
1041
  right: 30px;
@@ -1043,41 +1106,53 @@
1043
  width: 290px;
1044
  border-left: 1px solid #D8D8D8;
1045
  }
1046
- .so-panels-dialog .so-right-sidebar h3 {
 
1047
  color: #333;
1048
  }
1049
- .so-panels-dialog .so-right-sidebar h3:first-child {
 
1050
  margin-top: 0;
1051
  }
1052
- .so-panels-dialog .so-sidebar .form-field {
 
1053
  margin-bottom: 20px;
1054
  }
1055
- .so-panels-dialog .so-sidebar .form-field label {
 
1056
  font-weight: 500;
1057
  font-size: 15px;
1058
  display: block;
1059
  margin-bottom: 10px;
1060
  }
1061
  .so-panels-dialog.so-panels-dialog-has-left-sidebar .so-content,
 
1062
  .so-panels-dialog.so-panels-dialog-has-left-sidebar .so-toolbar,
1063
- .so-panels-dialog.so-panels-dialog-has-left-sidebar .so-title-bar {
 
 
1064
  left: 320px;
1065
  }
1066
- .so-panels-dialog.so-panels-dialog-has-left-sidebar .so-content {
 
1067
  -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.03);
1068
  -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.03);
1069
  box-shadow: inset 2px 2px 2px rgba(0,0,0,0.03);
1070
  }
1071
- .so-panels-dialog.so-panels-dialog-has-left-sidebar .so-left-sidebar {
 
1072
  display: block;
1073
  }
1074
- .so-panels-dialog.so-panels-dialog-has-right-sidebar .so-content {
 
1075
  right: 320px;
1076
  }
1077
- .so-panels-dialog.so-panels-dialog-has-right-sidebar .so-right-sidebar {
 
1078
  display: block;
1079
  }
1080
- .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget {
 
1081
  -webkit-border-radius: 2px;
1082
  -moz-border-radius: 2px;
1083
  border-radius: 2px;
@@ -1090,11 +1165,13 @@
1090
  box-shadow: 0 1px 2px rgba(0,0,0,0.075), inset 0 1px 0 #FFFFFF;
1091
  margin-bottom: 15px;
1092
  }
1093
- .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget:hover {
 
1094
  border: 1px solid #BBBBBB;
1095
  background: #FFFFFF;
1096
  }
1097
- .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current {
 
1098
  border-color: #0074a2;
1099
  background: #2ea2cc;
1100
  cursor: auto;
@@ -1102,48 +1179,58 @@
1102
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
1103
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
1104
  }
1105
- .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current h3 {
 
1106
  color: #FFFFFF;
1107
  }
1108
- .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current small {
 
1109
  color: #eeeeee;
1110
  }
1111
- .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current:hover {
 
1112
  border-color: #0074a2;
1113
  background: #2ea2cc;
1114
  }
1115
- .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget:last-child {
 
1116
  margin-bottom: 0;
1117
  }
1118
- .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget h3 {
 
1119
  margin: 0 0 7px 0;
1120
  padding: 0;
1121
  height: 1.2em;
1122
  color: #222222;
1123
  font-size: 14px;
1124
  }
1125
- .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget small {
 
1126
  font-size: 11px;
1127
  line-height: 1.25em;
1128
  display: block;
1129
  overflow: hidden;
1130
  color: #888888;
1131
  }
1132
- .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list {
 
1133
  zoom: 1;
1134
  margin: 0 -5px -10px -5px;
1135
  min-height: 10px;
1136
  }
1137
- .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list:before {
 
1138
  content: '';
1139
  display: block;
1140
  }
1141
- .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list:after {
 
1142
  content: '';
1143
  display: table;
1144
  clear: both;
1145
  }
1146
- .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type {
 
1147
  -ms-user-select: none;
1148
  /* IE 10+ */
1149
  -moz-user-select: -moz-none;
@@ -1160,22 +1247,26 @@
1160
  float: left;
1161
  }
1162
  @media (max-width: 1280px) {
1163
- .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type {
 
1164
  width: 33.333%;
1165
  }
1166
  }
1167
  @media (max-width: 960px) {
1168
- .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type {
 
1169
  width: 50%;
1170
  }
1171
  }
1172
- .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type h3 {
 
1173
  margin: 0 0 7px 0;
1174
  padding: 0;
1175
  color: #222222;
1176
  font-size: 14px;
1177
  }
1178
- .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type small {
 
1179
  font-size: 11px;
1180
  min-height: 2.5em;
1181
  line-height: 1.25em;
@@ -1183,7 +1274,8 @@
1183
  overflow: hidden;
1184
  color: #888888;
1185
  }
1186
- .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type .widget-icon {
 
1187
  font-size: 20px;
1188
  width: 20px;
1189
  height: 20px;
@@ -1191,7 +1283,8 @@
1191
  float: left;
1192
  margin: -1px 0.5em 0 0;
1193
  }
1194
- .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type-wrapper {
 
1195
  border: 1px solid #cccccc;
1196
  cursor: pointer;
1197
  padding: 10px;
@@ -1200,79 +1293,99 @@
1200
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.075);
1201
  box-shadow: 0 1px 2px rgba(0,0,0,0.075);
1202
  }
1203
- .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type-wrapper:hover {
 
1204
  border: 1px solid #BBBBBB;
1205
  background: #FFFFFF;
1206
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.075);
1207
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.075);
1208
  box-shadow: 0 2px 2px rgba(0,0,0,0.075);
1209
  }
1210
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form {
 
1211
  zoom: 1;
1212
  padding: 8px;
1213
  border: 1px solid #ccc;
1214
  margin-bottom: 20px;
1215
  background: #F3F3F3;
1216
  }
1217
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form:before {
 
1218
  content: '';
1219
  display: block;
1220
  }
1221
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form:after {
 
1222
  content: '';
1223
  display: table;
1224
  clear: both;
1225
  }
1226
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form input,
 
1227
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form select,
 
1228
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form button,
 
1229
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form strong,
1230
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form span {
 
 
1231
  display: inline;
1232
  margin: 1px 5px;
1233
  width: auto;
1234
  outline: none;
1235
  box-shadow: none;
1236
  }
1237
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form button {
 
1238
  margin-top: 2px;
1239
  }
1240
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form label {
 
1241
  display: inline;
1242
  }
1243
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview {
 
1244
  margin: 0 -6px;
1245
  height: 360px;
1246
  position: relative;
1247
  white-space: nowrap;
1248
  }
1249
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell,
 
1250
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell-in,
1251
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell-weight {
 
 
1252
  -ms-box-sizing: border-box;
1253
  -moz-box-sizing: border-box;
1254
  -webkit-box-sizing: border-box;
1255
  box-sizing: border-box;
1256
  }
1257
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell {
 
1258
  display: inline-block;
1259
  position: relative;
1260
  padding: 0 6px;
1261
  cursor: pointer;
1262
  }
1263
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in {
 
1264
  border: 1px solid #bcccd2;
1265
  min-height: 360px;
1266
  background: #e4eff4;
1267
  position: relative;
1268
  }
1269
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in.cell-selected {
 
1270
  background: #cae7f4 url("images/cell-selected.png") repeat;
1271
  border-color: #9abcc7;
1272
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
1273
  }
1274
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight,
1275
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input {
 
 
1276
  position: absolute;
1277
  font-size: 17px;
1278
  font-weight: bold;
@@ -1289,22 +1402,28 @@
1289
  cursor: pointer;
1290
  }
1291
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight:after,
1292
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input:after {
 
 
1293
  content: '%';
1294
  }
1295
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight:hover,
1296
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input:hover {
 
 
1297
  background: #F6F6F6;
1298
  border: 1px solid #D0D0D0;
1299
  }
1300
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input {
 
1301
  background: #F6F6F6;
1302
  border: 1px solid #D0D0D0;
1303
  -webkit-box-shadow: none;
1304
  -moz-box-shadow: none;
1305
  box-shadow: none;
1306
  }
1307
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .resize-handle {
 
1308
  z-index: 100;
1309
  position: absolute;
1310
  top: 0;
@@ -1319,78 +1438,98 @@
1319
  transition: background 0.15s ease-in-out 0s;
1320
  }
1321
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .resize-handle:hover,
1322
- .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .resize-handle.ui-draggable-dragging {
 
 
1323
  background: #b7e0f1;
1324
  }
1325
- .so-panels-dialog.so-panels-dialog-history .so-left-sidebar {
 
1326
  padding: 0;
1327
  }
1328
- .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry {
 
1329
  padding: 10px;
1330
  background: #F8F8F8;
1331
  cursor: pointer;
1332
  border-bottom: 1px solid #ccc;
1333
  }
1334
- .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry h3 {
 
1335
  margin: 0 0 0.6em 0;
1336
  font-size: 12px;
1337
  font-weight: bold;
1338
  color: #444444;
1339
  line-height: 1em;
1340
  }
1341
- .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry .timesince {
 
1342
  color: #999999;
1343
  font-size: 11px;
1344
  line-height: 1em;
1345
  }
1346
- .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry:hover {
 
1347
  background: #F0F0F0;
1348
  }
1349
- .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry.so-selected {
 
1350
  background: #EEEEEE;
1351
  }
1352
- .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry .count {
 
1353
  color: #999999;
1354
  }
1355
- .so-panels-dialog.so-panels-dialog-history .so-content {
 
1356
  padding: 0;
1357
  overflow-y: hidden;
1358
  }
1359
- .so-panels-dialog.so-panels-dialog-history .so-content form.history-form {
 
1360
  display: none;
1361
  }
1362
- .so-panels-dialog.so-panels-dialog-history .so-content iframe.siteorigin-panels-history-iframe {
 
1363
  width: 100%;
1364
  height: 100%;
1365
  }
1366
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content {
 
1367
  padding-left: 10px;
1368
  padding-right: 10px;
1369
  }
1370
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-error-message {
 
1371
  font-size: 14px;
1372
  border: 1px solid #cccccc;
1373
  background: #F8F8F8;
1374
  padding: 15px 20px;
1375
  }
1376
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .export-file-ui {
 
1377
  padding: 5px 15px;
1378
  text-align: right;
1379
  }
1380
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui {
 
1381
  padding: 15px;
1382
  }
1383
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .drag-drop-message {
 
1384
  display: none;
1385
  }
1386
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui.has-drag-drop .drag-drop-message {
 
1387
  display: block;
1388
  }
1389
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui p.drag-drop-message {
 
1390
  font-size: 1em;
1391
  margin-bottom: 0;
1392
  }
1393
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .drag-upload-area {
 
1394
  display: block;
1395
  -ms-box-sizing: border-box;
1396
  -moz-box-sizing: border-box;
@@ -1404,11 +1543,13 @@
1404
  -o-transition: all 0.25s ease 0s;
1405
  transition: all 0.25s ease 0s;
1406
  }
1407
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .drag-upload-area.file-dragover {
 
1408
  background-color: #f2f9fc;
1409
  border-color: #0074a2;
1410
  }
1411
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .progress-bar {
 
1412
  display: none;
1413
  padding: 2px;
1414
  border: 2px solid #2181b1;
@@ -1417,40 +1558,47 @@
1417
  border-radius: 2px;
1418
  margin-top: 20px;
1419
  }
1420
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .progress-bar .progress-percent {
 
1421
  height: 14px;
1422
  background-color: #358ebe;
1423
  -webkit-border-radius: 1px;
1424
  -moz-border-radius: 1px;
1425
  border-radius: 1px;
1426
  }
1427
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .file-browse-button {
 
1428
  padding: 12px 30px;
1429
  height: auto;
1430
  }
1431
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-browse {
 
1432
  background: #f3f3f3;
1433
  border-bottom: 1px solid #d0d0d0;
1434
  margin: -15px -10px 15px -10px;
1435
  padding: 15px;
1436
  font-weight: bold;
1437
  }
1438
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items-wrapper {
 
1439
  display: flex;
1440
  flex-flow: row wrap;
1441
  }
1442
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-no-results {
 
1443
  margin: 20px 0;
1444
  padding: 0 5px;
1445
  }
1446
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item {
 
1447
  -ms-box-sizing: border-box;
1448
  -moz-box-sizing: border-box;
1449
  -webkit-box-sizing: border-box;
1450
  box-sizing: border-box;
1451
  padding: 6px;
1452
  }
1453
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-directory-item-wrapper {
 
1454
  display: flex;
1455
  flex-flow: column nowrap;
1456
  height: 100%;
@@ -1462,38 +1610,45 @@
1462
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
1463
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
1464
  }
1465
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-title {
 
1466
  font-size: 15px;
1467
  margin: 0 0 13px 0;
1468
  }
1469
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot {
 
1470
  flex: 3 auto;
1471
  margin-bottom: 10px;
1472
  cursor: pointer;
1473
  }
1474
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot.so-loading {
 
1475
  background-image: url("images/wpspin_light.gif");
1476
  background-position: center center;
1477
  background-repeat: no-repeat;
1478
  }
1479
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1480
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot.so-loading {
 
1481
  background-image: url(images/wpspin_light-2x.gif);
1482
  background-size: 16px 16px;
1483
  }
1484
  }
1485
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot img {
 
1486
  display: block;
1487
  width: 100%;
1488
  height: auto;
1489
  }
1490
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot .so-screenshot-wrapper {
 
1491
  display: block;
1492
  min-height: 40px;
1493
  background: #808080;
1494
  border: 1px solid #d0d0d0;
1495
  }
1496
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-description {
 
1497
  flex: 1 auto;
1498
  font-size: 0.9em;
1499
  color: #666;
@@ -1501,7 +1656,8 @@
1501
  max-height: 60px;
1502
  overflow: hidden;
1503
  }
1504
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-bottom {
 
1505
  flex: 1 auto;
1506
  position: relative;
1507
  max-height: 50px;
@@ -1509,14 +1665,16 @@
1509
  background: #fcfcfc;
1510
  border-top: 1px solid #d0d0d0;
1511
  }
1512
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-bottom .so-title {
 
1513
  margin: 0;
1514
  padding: 16px 10px;
1515
  cursor: pointer;
1516
  overflow: hidden;
1517
  white-space: nowrap;
1518
  }
1519
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-bottom .so-buttons {
 
1520
  position: absolute;
1521
  z-index: 2;
1522
  top: 0;
@@ -1535,69 +1693,85 @@
1535
  -moz-box-shadow: -1px 0 1px rgba(0, 0, 0, 0.05);
1536
  box-shadow: -1px 0 1px rgba(0, 0, 0, 0.05);
1537
  }
1538
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item:hover .so-buttons {
 
1539
  visibility: visible;
1540
  }
1541
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected {
 
1542
  background-color: #e5f4fa;
1543
  }
1544
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-directory-item-wrapper {
 
1545
  background: #deeef4;
1546
  border-color: #9abcc7;
1547
  }
1548
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-bottom {
 
1549
  background: #f8fdff;
1550
  border-color: #bcccd2;
1551
  }
1552
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-bottom .so-title {
 
1553
  color: #3e484c;
1554
  }
1555
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-bottom .so-buttons {
 
1556
  background: #eaf2f6;
1557
  border-color: #bcccd2;
1558
  }
1559
  @media only screen and (min-width: 1680px) {
1560
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item {
 
1561
  width: 20%;
1562
  }
1563
  }
1564
  @media only screen and (max-width: 1679px) and (min-width: 1280px) {
1565
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item {
 
1566
  width: 25%;
1567
  }
1568
  }
1569
  @media only screen and (max-width: 1279px) and (min-width: 1140px) {
1570
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item {
 
1571
  width: 33.333%;
1572
  }
1573
  }
1574
  @media only screen and (max-width: 1139px) {
1575
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item {
 
1576
  width: 50%;
1577
  }
1578
  }
1579
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-pages {
 
1580
  margin-top: 15px;
1581
  padding: 0 5px;
1582
  }
1583
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-pages .button-disabled {
 
1584
  pointer-events: none;
1585
  }
1586
- .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-toolbar .so-buttons select.so-layout-position {
 
1587
  vertical-align: baseline;
1588
  }
1589
- .so-panels-dialog .so-visual-styles {
 
1590
  margin: -15px;
1591
  height: auto;
1592
  /* All the field types */
1593
  }
1594
- .so-panels-dialog .so-visual-styles h3 {
 
1595
  line-height: 1em;
1596
  margin: 0;
1597
  padding: 20px 15px;
1598
  border-bottom: 1px solid #ddd;
1599
  }
1600
- .so-panels-dialog .so-visual-styles .style-section-head {
 
1601
  background: #ffffff;
1602
  padding: 15px 10px;
1603
  border-bottom: 1px solid #ddd;
@@ -1607,95 +1781,119 @@
1607
  -ms-user-select: none;
1608
  user-select: none;
1609
  }
1610
- .so-panels-dialog .so-visual-styles .style-section-head h4 {
 
1611
  margin: 0;
1612
  }
1613
- .so-panels-dialog .so-visual-styles .style-section-fields {
 
1614
  padding: 15px;
1615
  border-bottom: 1px solid #ddd;
1616
  background: #F7F7F7;
1617
  }
1618
- .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper {
 
1619
  margin-bottom: 20px;
1620
  }
1621
- .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper:last-child {
 
1622
  margin-bottom: 0;
1623
  }
1624
- .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper > label {
 
1625
  font-weight: bold;
1626
  display: block;
1627
  margin-bottom: 3px;
1628
  }
1629
- .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper .style-field {
 
1630
  zoom: 1;
1631
  }
1632
- .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper .style-field:before {
 
1633
  content: '';
1634
  display: block;
1635
  }
1636
- .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper .style-field:after {
 
1637
  content: '';
1638
  display: table;
1639
  clear: both;
1640
  }
1641
- .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper .style-field input {
 
1642
  font-size: 12px;
1643
  }
1644
- .so-panels-dialog .so-visual-styles .style-input-wrapper {
 
1645
  zoom: 1;
1646
  }
1647
- .so-panels-dialog .so-visual-styles .style-input-wrapper:before {
 
1648
  content: '';
1649
  display: block;
1650
  }
1651
- .so-panels-dialog .so-visual-styles .style-input-wrapper:after {
 
1652
  content: '';
1653
  display: table;
1654
  clear: both;
1655
  }
1656
- .so-panels-dialog .so-visual-styles .style-input-wrapper input {
 
1657
  max-width: 100%;
1658
  }
1659
- .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-inputs {
 
1660
  overflow: auto;
1661
  margin: 0 -3px 4px -3px;
1662
  }
1663
- .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper {
 
1664
  box-sizing: border-box;
1665
  float: left;
1666
  width: 25%;
1667
  padding: 0 3px;
1668
  }
1669
- .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value {
 
1670
  border-width: 1px;
1671
  display: block;
1672
  max-width: 100%;
1673
  }
1674
- .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-top {
 
1675
  box-shadow: inset 0 2px 1px rgba(0, 115, 170, 0.35);
1676
  }
1677
- .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-right {
 
1678
  box-shadow: inset -3px 0 2px rgba(0, 115, 170, 0.35);
1679
  }
1680
- .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-bottom {
 
1681
  box-shadow: inset 0 -2px 1px rgba(0, 115, 170, 0.35);
1682
  }
1683
- .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-left {
 
1684
  box-shadow: inset 3px 0 2px rgba(0, 115, 170, 0.35);
1685
  }
1686
- .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-unit-multiple {
 
1687
  width: 100%;
1688
  display: block;
1689
  }
1690
- .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-unit-single {
 
1691
  float: right;
1692
  width: 25%;
1693
  }
1694
- .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-value-single {
 
1695
  float: left;
1696
  width: 72%;
1697
  }
1698
- .so-panels-dialog .so-visual-styles .style-field-image .so-image-selector {
 
1699
  display: inline-block;
1700
  background-color: #f7f7f7;
1701
  border: 1px solid #ccc;
@@ -1709,7 +1907,8 @@
1709
  -moz-box-shadow: inset 0 1px #FFFFFF;
1710
  box-shadow: inset 0 1px #FFFFFF;
1711
  }
1712
- .so-panels-dialog .so-visual-styles .style-field-image .so-image-selector .current-image {
 
1713
  height: 28px;
1714
  width: 28px;
1715
  float: left;
@@ -1732,14 +1931,16 @@
1732
  -webkit-background-clip: padding-box;
1733
  background-clip: padding-box;
1734
  }
1735
- .so-panels-dialog .so-visual-styles .style-field-image .so-image-selector .select-image {
 
1736
  font-size: 12px;
1737
  line-height: 28px;
1738
  float: left;
1739
  padding: 0 8px;
1740
  color: #555;
1741
  }
1742
- .so-panels-dialog .so-visual-styles .style-field-image .remove-image {
 
1743
  font-size: 12px;
1744
  margin-top: 4px;
1745
  margin-left: 15px;
@@ -1748,13 +1949,16 @@
1748
  color: #666;
1749
  text-decoration: none;
1750
  }
1751
- .so-panels-dialog .so-visual-styles .style-field-image .remove-image.hidden {
 
1752
  display: none;
1753
  }
1754
- .so-panels-dialog .so-visual-styles .style-field-image .image-fallback {
 
1755
  margin-top: 4px;
1756
  }
1757
- .so-panels-dialog .so-visual-styles .style-field-checkbox label {
 
1758
  -webkit-user-select: none;
1759
  /* Chrome all / Safari all */
1760
  -moz-user-select: none;
@@ -1763,11 +1967,13 @@
1763
  /* IE 10+ */
1764
  user-select: none;
1765
  }
1766
- .so-panels-dialog .so-visual-styles .so-field-code {
 
1767
  font-size: 12px;
1768
  font-family: "Courier 10 Pitch", Courier, monospace;
1769
  }
1770
- .so-panels-dialog .so-visual-styles .so-description {
 
1771
  color: #999;
1772
  font-size: 12px;
1773
  margin-top: 5px;
@@ -1775,30 +1981,79 @@
1775
  font-style: italic;
1776
  clear: both;
1777
  }
1778
- .so-panels-dialog .so-visual-styles.so-cell-styles {
 
1779
  margin-top: 15px;
1780
  }
1781
- .so-panels-dialog .so-content .siteorigin-panels-builder .so-builder-toolbar {
 
 
 
1782
  border: 1px solid #dedede;
 
1783
  }
1784
- .so-panels-dialog .so-content .siteorigin-panels-builder .so-rows-container {
 
 
 
1785
  padding: 20px 0 0 0;
1786
  }
1787
- .so-panels-dialog .so-content .siteorigin-panels-builder .so-panels-welcome-message {
 
 
 
1788
  padding-left: 0;
1789
  padding-right: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1790
  }
1791
- .so-panels-dialog .so-dropdown-wrapper input[type="button"].button-primary {
 
1792
  width: 125px;
1793
  height: 28px;
1794
  }
1795
- .so-panels-dialog .so-dropdown-wrapper .so-dropdown-links-wrapper {
 
1796
  display: block;
1797
  z-index: 11;
1798
  bottom: 28px;
1799
  width: 125px;
1800
  }
1801
- .so-panels-dialog .so-dropdown-wrapper .so-dropdown-links-wrapper.hidden {
 
1802
  display: none;
1803
  }
1804
  /* Display the dialog with a proper z-index in the customizer */
335
  zoom: 1;
336
  margin: 0 -5px;
337
  position: relative;
338
+ display: flex;
339
  }
340
  .siteorigin-panels-builder .so-rows-container .so-row-container .so-cells:before {
341
  content: '';
364
  -moz-box-sizing: border-box;
365
  -webkit-box-sizing: border-box;
366
  box-sizing: border-box;
 
367
  position: relative;
368
  padding: 0 5px;
369
  }
740
  padding-right: 15px;
741
  margin: 0 -15px;
742
  }
743
+ .so-panels-dialog,
744
+ .gutenberg {
745
  /* The add widget dialog */
746
  /* The row edit dialog */
747
  /* For prebuilt layouts */
748
+ /* Special case of the builder interface being inside a dialog, or gutenberg editor. */
749
+ /* Styles for PB in Gutenberg editor. */
750
+ /* PB Icon in Gutenberg */
751
  }
752
  .so-panels-dialog .so-overlay,
753
+ .gutenberg .so-overlay,
754
  .so-panels-dialog .so-content,
755
+ .gutenberg .so-content,
756
  .so-panels-dialog .so-title-bar,
757
+ .gutenberg .so-title-bar,
758
  .so-panels-dialog .so-toolbar,
759
+ .gutenberg .so-toolbar,
760
  .so-panels-dialog .so-left-sidebar,
761
+ .gutenberg .so-left-sidebar,
762
+ .so-panels-dialog .so-right-sidebar,
763
+ .gutenberg .so-right-sidebar {
764
  z-index: 100001;
765
  position: fixed;
766
  -ms-box-sizing: border-box;
770
  padding: 15px;
771
  }
772
  .so-panels-dialog .so-content,
773
+ .gutenberg .so-content,
774
  .so-panels-dialog .so-left-sidebar,
775
+ .gutenberg .so-left-sidebar,
776
+ .so-panels-dialog .so-right-sidebar,
777
+ .gutenberg .so-right-sidebar {
778
  overflow-y: auto;
779
  }
780
+ .so-panels-dialog .so-overlay,
781
+ .gutenberg .so-overlay {
782
  top: 0;
783
  left: 0;
784
  right: 0;
785
  bottom: 0;
786
  background: rgba(0, 0, 0, 0.5);
787
  }
788
+ .so-panels-dialog .so-content,
789
+ .gutenberg .so-content {
790
  top: 80px;
791
  left: 30px;
792
  right: 30px;
797
  -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.03);
798
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.03);
799
  }
800
+ .so-panels-dialog .so-content > *:first-child,
801
+ .gutenberg .so-content > *:first-child {
802
  margin-top: 0;
803
  }
804
+ .so-panels-dialog .so-content > *:last-child,
805
+ .gutenberg .so-content > *:last-child {
806
  margin-bottom: 0;
807
  }
808
+ .so-panels-dialog .so-content .so-content-tabs > *,
809
+ .gutenberg .so-content .so-content-tabs > * {
810
  display: none;
811
  }
812
+ .so-panels-dialog .so-title-bar,
813
+ .gutenberg .so-title-bar {
814
  left: 30px;
815
  right: 30px;
816
  top: 30px;
819
  border-bottom: 1px solid #D8D8D8;
820
  /* These are the action buttons in the title bar */
821
  }
822
+ .so-panels-dialog .so-title-bar h3.so-title,
823
+ .gutenberg .so-title-bar h3.so-title {
824
  -ms-box-sizing: border-box;
825
  -moz-box-sizing: border-box;
826
  -webkit-box-sizing: border-box;
830
  display: block;
831
  }
832
  .so-panels-dialog .so-title-bar h3.so-title.so-title-editable:hover,
833
+ .gutenberg .so-title-bar h3.so-title.so-title-editable:hover,
834
+ .so-panels-dialog .so-title-bar h3.so-title.so-title-editable:focus,
835
+ .gutenberg .so-title-bar h3.so-title.so-title-editable:focus {
836
  outline: none;
837
  background-color: #F0F0F0;
838
  }
839
+ .so-panels-dialog .so-title-bar h3.so-title.so-title-editable:focus,
840
+ .gutenberg .so-title-bar h3.so-title.so-title-editable:focus {
841
  margin-top: -4px;
842
  margin-left: -4px;
843
  border: 1px solid #E4E4E4;
844
  }
845
+ .so-panels-dialog .so-title-bar input[type=text].so-edit-title,
846
+ .gutenberg .so-title-bar input[type=text].so-edit-title {
847
  margin-top: -3px;
848
  margin-left: -3px;
849
  display: none;
855
  background-color: #F0F0F0;
856
  padding: 4px 5px;
857
  }
858
+ .so-panels-dialog .so-title-bar h3.so-parent-link,
859
+ .gutenberg .so-title-bar h3.so-parent-link {
860
  cursor: pointer;
861
  position: relative;
862
  float: left;
863
  margin: 0 15px 0 0 !important;
864
  padding: 0 27px 0 0 !important;
865
  }
866
+ .so-panels-dialog .so-title-bar h3.so-parent-link .so-separator,
867
+ .gutenberg .so-title-bar h3.so-parent-link .so-separator {
868
  position: absolute;
869
  top: -15px;
870
  right: 0;
874
  background: url(images/dialog-separator.png) no-repeat;
875
  }
876
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
877
+ .so-panels-dialog .so-title-bar h3.so-parent-link .so-separator,
878
+ .gutenberg .so-title-bar h3.so-parent-link .so-separator {
879
  background: url(images/dialog-separator@2x.png) no-repeat;
880
  background-size: cover;
881
  }
882
  }
883
+ .so-panels-dialog .so-title-bar a,
884
+ .gutenberg .so-title-bar a {
885
  cursor: pointer;
886
  position: absolute;
887
  box-sizing: border-box;
899
  border-bottom: 1px solid #d8d8d8;
900
  /* Disabled nav */
901
  }
902
+ .so-panels-dialog .so-title-bar a:hover,
903
+ .gutenberg .so-title-bar a:hover {
904
  background: #e9e9e9;
905
  }
906
+ .so-panels-dialog .so-title-bar a:hover .so-dialog-icon,
907
+ .gutenberg .so-title-bar a:hover .so-dialog-icon {
908
  color: #333333;
909
  }
910
+ .so-panels-dialog .so-title-bar a .so-dialog-icon,
911
+ .gutenberg .so-title-bar a .so-dialog-icon {
912
  position: absolute;
913
  top: 50%;
914
  left: 50%;
920
  color: #666666;
921
  text-align: center;
922
  }
923
+ .so-panels-dialog .so-title-bar a .so-dialog-icon:before,
924
+ .gutenberg .so-title-bar a .so-dialog-icon:before {
925
  font: 400 20px/1em dashicons;
926
  top: 7px;
927
  left: 13px;
928
  }
929
+ .so-panels-dialog .so-title-bar a.so-close,
930
+ .gutenberg .so-title-bar a.so-close {
931
  right: 0;
932
  }
933
+ .so-panels-dialog .so-title-bar a.so-close .so-dialog-icon:before,
934
+ .gutenberg .so-title-bar a.so-close .so-dialog-icon:before {
935
  content: "\f335";
936
  }
937
+ .so-panels-dialog .so-title-bar a.so-next,
938
+ .gutenberg .so-title-bar a.so-next {
939
  right: 50px;
940
  }
941
+ .so-panels-dialog .so-title-bar a.so-next .so-dialog-icon:before,
942
+ .gutenberg .so-title-bar a.so-next .so-dialog-icon:before {
943
  content: '\f345';
944
  }
945
+ .so-panels-dialog .so-title-bar a.so-previous,
946
+ .gutenberg .so-title-bar a.so-previous {
947
  right: 100px;
948
  }
949
+ .so-panels-dialog .so-title-bar a.so-previous .so-dialog-icon:before,
950
+ .gutenberg .so-title-bar a.so-previous .so-dialog-icon:before {
951
  content: '\f341';
952
  }
953
+ .so-panels-dialog .so-title-bar a.so-nav.so-disabled,
954
+ .gutenberg .so-title-bar a.so-nav.so-disabled {
955
  cursor: default;
956
  pointer-events: none;
957
  }
958
+ .so-panels-dialog .so-title-bar a.so-nav.so-disabled .so-dialog-icon,
959
+ .gutenberg .so-title-bar a.so-nav.so-disabled .so-dialog-icon {
960
  color: #dddddd;
961
  }
962
+ .so-panels-dialog .so-title-bar.so-has-icon,
963
+ .gutenberg .so-title-bar.so-has-icon {
964
  padding-left: 45px;
965
  }
966
+ .so-panels-dialog .so-title-bar.so-has-icon .so-panels-icon,
967
+ .gutenberg .so-title-bar.so-has-icon .so-panels-icon {
968
  position: absolute;
969
  top: 14.5px;
970
  left: 14px;
976
  text-align: center;
977
  color: #666;
978
  }
979
+ .so-panels-dialog .so-toolbar,
980
+ .gutenberg .so-toolbar {
981
  left: 30px;
982
  right: 30px;
983
  bottom: 30px;
986
  border-top: 1px solid #D8D8D8;
987
  z-index: 100002;
988
  }
989
+ .so-panels-dialog .so-toolbar .so-status,
990
+ .gutenberg .so-toolbar .so-status {
991
  float: left;
992
  padding-top: 6px;
993
  padding-bottom: 6px;
995
  color: #999999;
996
  line-height: 1em;
997
  }
998
+ .so-panels-dialog .so-toolbar .so-status.so-panels-loading,
999
+ .gutenberg .so-toolbar .so-status.so-panels-loading {
1000
  padding-left: 26px;
1001
  background-position: left center;
1002
  }
1003
+ .so-panels-dialog .so-toolbar .so-status .dashicons-warning,
1004
+ .gutenberg .so-toolbar .so-status .dashicons-warning {
1005
  color: #aa0000;
1006
  vertical-align: middle;
1007
  margin-right: 7px;
1008
  margin-top: -1px;
1009
  }
1010
+ .so-panels-dialog .so-toolbar .so-buttons,
1011
+ .gutenberg .so-toolbar .so-buttons {
1012
  float: right;
1013
  }
1014
+ .so-panels-dialog .so-toolbar .so-buttons .action-buttons,
1015
+ .gutenberg .so-toolbar .so-buttons .action-buttons {
1016
  position: absolute;
1017
  left: 15px;
1018
  top: 50%;
1019
  margin-top: -0.65em;
1020
  }
1021
+ .so-panels-dialog .so-toolbar .so-buttons .action-buttons a,
1022
+ .gutenberg .so-toolbar .so-buttons .action-buttons a {
1023
  cursor: pointer;
1024
  display: inline;
1025
  padding: 0.2em 0.5em;
1027
  margin-right: 0.5em;
1028
  text-decoration: none;
1029
  }
1030
+ .so-panels-dialog .so-toolbar .so-buttons .action-buttons .so-delete,
1031
+ .gutenberg .so-toolbar .so-buttons .action-buttons .so-delete {
1032
  color: #a00;
1033
  }
1034
+ .so-panels-dialog .so-toolbar .so-buttons .action-buttons .so-delete:hover,
1035
+ .gutenberg .so-toolbar .so-buttons .action-buttons .so-delete:hover {
1036
  background: #a00;
1037
  color: #FFFFFF;
1038
  }
1039
+ .so-panels-dialog .so-toolbar .so-buttons .action-buttons .so-duplicate:hover,
1040
+ .gutenberg .so-toolbar .so-buttons .action-buttons .so-duplicate:hover {
1041
  text-decoration: underline;
1042
  }
1043
  .so-panels-dialog .so-left-sidebar,
1044
+ .gutenberg .so-left-sidebar,
1045
+ .so-panels-dialog .so-right-sidebar,
1046
+ .gutenberg .so-right-sidebar {
1047
  background-color: #f3f3f3;
1048
  }
1049
+ .so-panels-dialog .so-left-sidebar,
1050
+ .gutenberg .so-left-sidebar {
1051
  display: none;
1052
  top: 30px;
1053
  left: 30px;
1055
  width: 290px;
1056
  border-right: 1px solid #D8D8D8;
1057
  }
1058
+ .so-panels-dialog .so-left-sidebar h4,
1059
+ .gutenberg .so-left-sidebar h4 {
1060
  margin: 0 0 20px 0;
1061
  font-size: 18px;
1062
  }
1063
+ .so-panels-dialog .so-left-sidebar .so-sidebar-search,
1064
+ .gutenberg .so-left-sidebar .so-sidebar-search {
1065
  width: 100%;
1066
  padding: 6px;
1067
  margin-bottom: 20px;
1068
  }
1069
+ .so-panels-dialog .so-left-sidebar .so-sidebar-tabs,
1070
+ .gutenberg .so-left-sidebar .so-sidebar-tabs {
1071
  list-style: none;
1072
  margin: 0 -15px;
1073
  }
1074
+ .so-panels-dialog .so-left-sidebar .so-sidebar-tabs li,
1075
+ .gutenberg .so-left-sidebar .so-sidebar-tabs li {
1076
  margin-bottom: 0;
1077
  }
1078
+ .so-panels-dialog .so-left-sidebar .so-sidebar-tabs li a,
1079
+ .gutenberg .so-left-sidebar .so-sidebar-tabs li a {
1080
  padding: 7px 16px;
1081
  display: block;
1082
  font-size: 14px;
1083
  text-decoration: none;
1084
  box-shadow: none !important;
1085
  }
1086
+ .so-panels-dialog .so-left-sidebar .so-sidebar-tabs li a:hover,
1087
+ .gutenberg .so-left-sidebar .so-sidebar-tabs li a:hover {
1088
  background: #FFFFFF;
1089
  }
1090
+ .so-panels-dialog .so-left-sidebar .so-sidebar-tabs li.tab-active a,
1091
+ .gutenberg .so-left-sidebar .so-sidebar-tabs li.tab-active a {
1092
  color: #555;
1093
  font-weight: bold;
1094
  background: #FFFFFF;
1095
  }
1096
+ .so-panels-dialog .so-left-sidebar .so-sidebar-tabs li.tab-active a:hover,
1097
+ .gutenberg .so-left-sidebar .so-sidebar-tabs li.tab-active a:hover {
1098
  background: #FFFFFF;
1099
  }
1100
+ .so-panels-dialog .so-right-sidebar,
1101
+ .gutenberg .so-right-sidebar {
1102
  display: none;
1103
  top: 80px;
1104
  right: 30px;
1106
  width: 290px;
1107
  border-left: 1px solid #D8D8D8;
1108
  }
1109
+ .so-panels-dialog .so-right-sidebar h3,
1110
+ .gutenberg .so-right-sidebar h3 {
1111
  color: #333;
1112
  }
1113
+ .so-panels-dialog .so-right-sidebar h3:first-child,
1114
+ .gutenberg .so-right-sidebar h3:first-child {
1115
  margin-top: 0;
1116
  }
1117
+ .so-panels-dialog .so-sidebar .form-field,
1118
+ .gutenberg .so-sidebar .form-field {
1119
  margin-bottom: 20px;
1120
  }
1121
+ .so-panels-dialog .so-sidebar .form-field label,
1122
+ .gutenberg .so-sidebar .form-field label {
1123
  font-weight: 500;
1124
  font-size: 15px;
1125
  display: block;
1126
  margin-bottom: 10px;
1127
  }
1128
  .so-panels-dialog.so-panels-dialog-has-left-sidebar .so-content,
1129
+ .gutenberg.so-panels-dialog-has-left-sidebar .so-content,
1130
  .so-panels-dialog.so-panels-dialog-has-left-sidebar .so-toolbar,
1131
+ .gutenberg.so-panels-dialog-has-left-sidebar .so-toolbar,
1132
+ .so-panels-dialog.so-panels-dialog-has-left-sidebar .so-title-bar,
1133
+ .gutenberg.so-panels-dialog-has-left-sidebar .so-title-bar {
1134
  left: 320px;
1135
  }
1136
+ .so-panels-dialog.so-panels-dialog-has-left-sidebar .so-content,
1137
+ .gutenberg.so-panels-dialog-has-left-sidebar .so-content {
1138
  -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.03);
1139
  -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.03);
1140
  box-shadow: inset 2px 2px 2px rgba(0,0,0,0.03);
1141
  }
1142
+ .so-panels-dialog.so-panels-dialog-has-left-sidebar .so-left-sidebar,
1143
+ .gutenberg.so-panels-dialog-has-left-sidebar .so-left-sidebar {
1144
  display: block;
1145
  }
1146
+ .so-panels-dialog.so-panels-dialog-has-right-sidebar .so-content,
1147
+ .gutenberg.so-panels-dialog-has-right-sidebar .so-content {
1148
  right: 320px;
1149
  }
1150
+ .so-panels-dialog.so-panels-dialog-has-right-sidebar .so-right-sidebar,
1151
+ .gutenberg.so-panels-dialog-has-right-sidebar .so-right-sidebar {
1152
  display: block;
1153
  }
1154
+ .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget,
1155
+ .gutenberg.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget {
1156
  -webkit-border-radius: 2px;
1157
  -moz-border-radius: 2px;
1158
  border-radius: 2px;
1165
  box-shadow: 0 1px 2px rgba(0,0,0,0.075), inset 0 1px 0 #FFFFFF;
1166
  margin-bottom: 15px;
1167
  }
1168
+ .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget:hover,
1169
+ .gutenberg.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget:hover {
1170
  border: 1px solid #BBBBBB;
1171
  background: #FFFFFF;
1172
  }
1173
+ .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current,
1174
+ .gutenberg.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current {
1175
  border-color: #0074a2;
1176
  background: #2ea2cc;
1177
  cursor: auto;
1179
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
1180
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
1181
  }
1182
+ .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current h3,
1183
+ .gutenberg.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current h3 {
1184
  color: #FFFFFF;
1185
  }
1186
+ .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current small,
1187
+ .gutenberg.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current small {
1188
  color: #eeeeee;
1189
  }
1190
+ .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current:hover,
1191
+ .gutenberg.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget.so-current:hover {
1192
  border-color: #0074a2;
1193
  background: #2ea2cc;
1194
  }
1195
+ .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget:last-child,
1196
+ .gutenberg.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget:last-child {
1197
  margin-bottom: 0;
1198
  }
1199
+ .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget h3,
1200
+ .gutenberg.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget h3 {
1201
  margin: 0 0 7px 0;
1202
  padding: 0;
1203
  height: 1.2em;
1204
  color: #222222;
1205
  font-size: 14px;
1206
  }
1207
+ .so-panels-dialog.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget small,
1208
+ .gutenberg.so-panels-dialog-edit-widget .so-left-sidebar .so-widgets .so-widget small {
1209
  font-size: 11px;
1210
  line-height: 1.25em;
1211
  display: block;
1212
  overflow: hidden;
1213
  color: #888888;
1214
  }
1215
+ .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list,
1216
+ .gutenberg.so-panels-dialog-add-widget .widget-type-list {
1217
  zoom: 1;
1218
  margin: 0 -5px -10px -5px;
1219
  min-height: 10px;
1220
  }
1221
+ .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list:before,
1222
+ .gutenberg.so-panels-dialog-add-widget .widget-type-list:before {
1223
  content: '';
1224
  display: block;
1225
  }
1226
+ .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list:after,
1227
+ .gutenberg.so-panels-dialog-add-widget .widget-type-list:after {
1228
  content: '';
1229
  display: table;
1230
  clear: both;
1231
  }
1232
+ .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type,
1233
+ .gutenberg.so-panels-dialog-add-widget .widget-type-list .widget-type {
1234
  -ms-user-select: none;
1235
  /* IE 10+ */
1236
  -moz-user-select: -moz-none;
1247
  float: left;
1248
  }
1249
  @media (max-width: 1280px) {
1250
+ .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type,
1251
+ .gutenberg.so-panels-dialog-add-widget .widget-type-list .widget-type {
1252
  width: 33.333%;
1253
  }
1254
  }
1255
  @media (max-width: 960px) {
1256
+ .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type,
1257
+ .gutenberg.so-panels-dialog-add-widget .widget-type-list .widget-type {
1258
  width: 50%;
1259
  }
1260
  }
1261
+ .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type h3,
1262
+ .gutenberg.so-panels-dialog-add-widget .widget-type-list .widget-type h3 {
1263
  margin: 0 0 7px 0;
1264
  padding: 0;
1265
  color: #222222;
1266
  font-size: 14px;
1267
  }
1268
+ .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type small,
1269
+ .gutenberg.so-panels-dialog-add-widget .widget-type-list .widget-type small {
1270
  font-size: 11px;
1271
  min-height: 2.5em;
1272
  line-height: 1.25em;
1274
  overflow: hidden;
1275
  color: #888888;
1276
  }
1277
+ .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type .widget-icon,
1278
+ .gutenberg.so-panels-dialog-add-widget .widget-type-list .widget-type .widget-icon {
1279
  font-size: 20px;
1280
  width: 20px;
1281
  height: 20px;
1283
  float: left;
1284
  margin: -1px 0.5em 0 0;
1285
  }
1286
+ .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type-wrapper,
1287
+ .gutenberg.so-panels-dialog-add-widget .widget-type-list .widget-type-wrapper {
1288
  border: 1px solid #cccccc;
1289
  cursor: pointer;
1290
  padding: 10px;
1293
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.075);
1294
  box-shadow: 0 1px 2px rgba(0,0,0,0.075);
1295
  }
1296
+ .so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type-wrapper:hover,
1297
+ .gutenberg.so-panels-dialog-add-widget .widget-type-list .widget-type-wrapper:hover {
1298
  border: 1px solid #BBBBBB;
1299
  background: #FFFFFF;
1300
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.075);
1301
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.075);
1302
  box-shadow: 0 2px 2px rgba(0,0,0,0.075);
1303
  }
1304
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form,
1305
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-set-form {
1306
  zoom: 1;
1307
  padding: 8px;
1308
  border: 1px solid #ccc;
1309
  margin-bottom: 20px;
1310
  background: #F3F3F3;
1311
  }
1312
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form:before,
1313
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-set-form:before {
1314
  content: '';
1315
  display: block;
1316
  }
1317
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form:after,
1318
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-set-form:after {
1319
  content: '';
1320
  display: table;
1321
  clear: both;
1322
  }
1323
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form input,
1324
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-set-form input,
1325
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form select,
1326
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-set-form select,
1327
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form button,
1328
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-set-form button,
1329
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form strong,
1330
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-set-form strong,
1331
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form span,
1332
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-set-form span {
1333
  display: inline;
1334
  margin: 1px 5px;
1335
  width: auto;
1336
  outline: none;
1337
  box-shadow: none;
1338
  }
1339
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form button,
1340
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-set-form button {
1341
  margin-top: 2px;
1342
  }
1343
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-set-form label,
1344
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-set-form label {
1345
  display: inline;
1346
  }
1347
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview,
1348
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview {
1349
  margin: 0 -6px;
1350
  height: 360px;
1351
  position: relative;
1352
  white-space: nowrap;
1353
  }
1354
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell,
1355
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell,
1356
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell-in,
1357
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell-in,
1358
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell-weight,
1359
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell-weight {
1360
  -ms-box-sizing: border-box;
1361
  -moz-box-sizing: border-box;
1362
  -webkit-box-sizing: border-box;
1363
  box-sizing: border-box;
1364
  }
1365
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell,
1366
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell {
1367
  display: inline-block;
1368
  position: relative;
1369
  padding: 0 6px;
1370
  cursor: pointer;
1371
  }
1372
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in,
1373
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in {
1374
  border: 1px solid #bcccd2;
1375
  min-height: 360px;
1376
  background: #e4eff4;
1377
  position: relative;
1378
  }
1379
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in.cell-selected,
1380
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in.cell-selected {
1381
  background: #cae7f4 url("images/cell-selected.png") repeat;
1382
  border-color: #9abcc7;
1383
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
1384
  }
1385
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight,
1386
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight,
1387
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input,
1388
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input {
1389
  position: absolute;
1390
  font-size: 17px;
1391
  font-weight: bold;
1402
  cursor: pointer;
1403
  }
1404
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight:after,
1405
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight:after,
1406
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input:after,
1407
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input:after {
1408
  content: '%';
1409
  }
1410
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight:hover,
1411
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight:hover,
1412
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input:hover,
1413
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input:hover {
1414
  background: #F6F6F6;
1415
  border: 1px solid #D0D0D0;
1416
  }
1417
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input,
1418
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .preview-cell-in .preview-cell-weight-input {
1419
  background: #F6F6F6;
1420
  border: 1px solid #D0D0D0;
1421
  -webkit-box-shadow: none;
1422
  -moz-box-shadow: none;
1423
  box-shadow: none;
1424
  }
1425
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .resize-handle,
1426
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .resize-handle {
1427
  z-index: 100;
1428
  position: absolute;
1429
  top: 0;
1438
  transition: background 0.15s ease-in-out 0s;
1439
  }
1440
  .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .resize-handle:hover,
1441
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .resize-handle:hover,
1442
+ .so-panels-dialog.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .resize-handle.ui-draggable-dragging,
1443
+ .gutenberg.so-panels-dialog-row-edit .so-content .row-preview .preview-cell .resize-handle.ui-draggable-dragging {
1444
  background: #b7e0f1;
1445
  }
1446
+ .so-panels-dialog.so-panels-dialog-history .so-left-sidebar,
1447
+ .gutenberg.so-panels-dialog-history .so-left-sidebar {
1448
  padding: 0;
1449
  }
1450
+ .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry,
1451
+ .gutenberg.so-panels-dialog-history .history-entries .history-entry {
1452
  padding: 10px;
1453
  background: #F8F8F8;
1454
  cursor: pointer;
1455
  border-bottom: 1px solid #ccc;
1456
  }
1457
+ .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry h3,
1458
+ .gutenberg.so-panels-dialog-history .history-entries .history-entry h3 {
1459
  margin: 0 0 0.6em 0;
1460
  font-size: 12px;
1461
  font-weight: bold;
1462
  color: #444444;
1463
  line-height: 1em;
1464
  }
1465
+ .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry .timesince,
1466
+ .gutenberg.so-panels-dialog-history .history-entries .history-entry .timesince {
1467
  color: #999999;
1468
  font-size: 11px;
1469
  line-height: 1em;
1470
  }
1471
+ .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry:hover,
1472
+ .gutenberg.so-panels-dialog-history .history-entries .history-entry:hover {
1473
  background: #F0F0F0;
1474
  }
1475
+ .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry.so-selected,
1476
+ .gutenberg.so-panels-dialog-history .history-entries .history-entry.so-selected {
1477
  background: #EEEEEE;
1478
  }
1479
+ .so-panels-dialog.so-panels-dialog-history .history-entries .history-entry .count,
1480
+ .gutenberg.so-panels-dialog-history .history-entries .history-entry .count {
1481
  color: #999999;
1482
  }
1483
+ .so-panels-dialog.so-panels-dialog-history .so-content,
1484
+ .gutenberg.so-panels-dialog-history .so-content {
1485
  padding: 0;
1486
  overflow-y: hidden;
1487
  }
1488
+ .so-panels-dialog.so-panels-dialog-history .so-content form.history-form,
1489
+ .gutenberg.so-panels-dialog-history .so-content form.history-form {
1490
  display: none;
1491
  }
1492
+ .so-panels-dialog.so-panels-dialog-history .so-content iframe.siteorigin-panels-history-iframe,
1493
+ .gutenberg.so-panels-dialog-history .so-content iframe.siteorigin-panels-history-iframe {
1494
  width: 100%;
1495
  height: 100%;
1496
  }
1497
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content,
1498
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content {
1499
  padding-left: 10px;
1500
  padding-right: 10px;
1501
  }
1502
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-error-message,
1503
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-error-message {
1504
  font-size: 14px;
1505
  border: 1px solid #cccccc;
1506
  background: #F8F8F8;
1507
  padding: 15px 20px;
1508
  }
1509
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .export-file-ui,
1510
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .export-file-ui {
1511
  padding: 5px 15px;
1512
  text-align: right;
1513
  }
1514
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui,
1515
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui {
1516
  padding: 15px;
1517
  }
1518
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .drag-drop-message,
1519
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .drag-drop-message {
1520
  display: none;
1521
  }
1522
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui.has-drag-drop .drag-drop-message,
1523
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui.has-drag-drop .drag-drop-message {
1524
  display: block;
1525
  }
1526
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui p.drag-drop-message,
1527
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui p.drag-drop-message {
1528
  font-size: 1em;
1529
  margin-bottom: 0;
1530
  }
1531
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .drag-upload-area,
1532
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .drag-upload-area {
1533
  display: block;
1534
  -ms-box-sizing: border-box;
1535
  -moz-box-sizing: border-box;
1543
  -o-transition: all 0.25s ease 0s;
1544
  transition: all 0.25s ease 0s;
1545
  }
1546
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .drag-upload-area.file-dragover,
1547
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .drag-upload-area.file-dragover {
1548
  background-color: #f2f9fc;
1549
  border-color: #0074a2;
1550
  }
1551
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .progress-bar,
1552
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .progress-bar {
1553
  display: none;
1554
  padding: 2px;
1555
  border: 2px solid #2181b1;
1558
  border-radius: 2px;
1559
  margin-top: 20px;
1560
  }
1561
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .progress-bar .progress-percent,
1562
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .progress-bar .progress-percent {
1563
  height: 14px;
1564
  background-color: #358ebe;
1565
  -webkit-border-radius: 1px;
1566
  -moz-border-radius: 1px;
1567
  border-radius: 1px;
1568
  }
1569
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .file-browse-button,
1570
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .import-upload-ui .file-browse-button {
1571
  padding: 12px 30px;
1572
  height: auto;
1573
  }
1574
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-browse,
1575
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-browse {
1576
  background: #f3f3f3;
1577
  border-bottom: 1px solid #d0d0d0;
1578
  margin: -15px -10px 15px -10px;
1579
  padding: 15px;
1580
  font-weight: bold;
1581
  }
1582
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items-wrapper,
1583
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items-wrapper {
1584
  display: flex;
1585
  flex-flow: row wrap;
1586
  }
1587
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-no-results,
1588
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-no-results {
1589
  margin: 20px 0;
1590
  padding: 0 5px;
1591
  }
1592
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item,
1593
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item {
1594
  -ms-box-sizing: border-box;
1595
  -moz-box-sizing: border-box;
1596
  -webkit-box-sizing: border-box;
1597
  box-sizing: border-box;
1598
  padding: 6px;
1599
  }
1600
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-directory-item-wrapper,
1601
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-directory-item-wrapper {
1602
  display: flex;
1603
  flex-flow: column nowrap;
1604
  height: 100%;
1610
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
1611
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
1612
  }
1613
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-title,
1614
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-title {
1615
  font-size: 15px;
1616
  margin: 0 0 13px 0;
1617
  }
1618
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot,
1619
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot {
1620
  flex: 3 auto;
1621
  margin-bottom: 10px;
1622
  cursor: pointer;
1623
  }
1624
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot.so-loading,
1625
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot.so-loading {
1626
  background-image: url("images/wpspin_light.gif");
1627
  background-position: center center;
1628
  background-repeat: no-repeat;
1629
  }
1630
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
1631
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot.so-loading,
1632
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot.so-loading {
1633
  background-image: url(images/wpspin_light-2x.gif);
1634
  background-size: 16px 16px;
1635
  }
1636
  }
1637
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot img,
1638
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot img {
1639
  display: block;
1640
  width: 100%;
1641
  height: auto;
1642
  }
1643
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot .so-screenshot-wrapper,
1644
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-screenshot .so-screenshot-wrapper {
1645
  display: block;
1646
  min-height: 40px;
1647
  background: #808080;
1648
  border: 1px solid #d0d0d0;
1649
  }
1650
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-description,
1651
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-description {
1652
  flex: 1 auto;
1653
  font-size: 0.9em;
1654
  color: #666;
1656
  max-height: 60px;
1657
  overflow: hidden;
1658
  }
1659
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-bottom,
1660
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-bottom {
1661
  flex: 1 auto;
1662
  position: relative;
1663
  max-height: 50px;
1665
  background: #fcfcfc;
1666
  border-top: 1px solid #d0d0d0;
1667
  }
1668
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-bottom .so-title,
1669
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-bottom .so-title {
1670
  margin: 0;
1671
  padding: 16px 10px;
1672
  cursor: pointer;
1673
  overflow: hidden;
1674
  white-space: nowrap;
1675
  }
1676
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-bottom .so-buttons,
1677
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item .so-bottom .so-buttons {
1678
  position: absolute;
1679
  z-index: 2;
1680
  top: 0;
1693
  -moz-box-shadow: -1px 0 1px rgba(0, 0, 0, 0.05);
1694
  box-shadow: -1px 0 1px rgba(0, 0, 0, 0.05);
1695
  }
1696
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item:hover .so-buttons,
1697
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item:hover .so-buttons {
1698
  visibility: visible;
1699
  }
1700
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected,
1701
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected {
1702
  background-color: #e5f4fa;
1703
  }
1704
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-directory-item-wrapper,
1705
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-directory-item-wrapper {
1706
  background: #deeef4;
1707
  border-color: #9abcc7;
1708
  }
1709
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-bottom,
1710
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-bottom {
1711
  background: #f8fdff;
1712
  border-color: #bcccd2;
1713
  }
1714
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-bottom .so-title,
1715
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-bottom .so-title {
1716
  color: #3e484c;
1717
  }
1718
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-bottom .so-buttons,
1719
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item.selected .so-bottom .so-buttons {
1720
  background: #eaf2f6;
1721
  border-color: #bcccd2;
1722
  }
1723
  @media only screen and (min-width: 1680px) {
1724
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item,
1725
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item {
1726
  width: 20%;
1727
  }
1728
  }
1729
  @media only screen and (max-width: 1679px) and (min-width: 1280px) {
1730
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item,
1731
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item {
1732
  width: 25%;
1733
  }
1734
  }
1735
  @media only screen and (max-width: 1279px) and (min-width: 1140px) {
1736
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item,
1737
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item {
1738
  width: 33.333%;
1739
  }
1740
  }
1741
  @media only screen and (max-width: 1139px) {
1742
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item,
1743
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-items .so-directory-item {
1744
  width: 50%;
1745
  }
1746
  }
1747
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-pages,
1748
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-pages {
1749
  margin-top: 15px;
1750
  padding: 0 5px;
1751
  }
1752
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-content .so-directory-pages .button-disabled,
1753
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-content .so-directory-pages .button-disabled {
1754
  pointer-events: none;
1755
  }
1756
+ .so-panels-dialog.so-panels-dialog-prebuilt-layouts .so-toolbar .so-buttons select.so-layout-position,
1757
+ .gutenberg.so-panels-dialog-prebuilt-layouts .so-toolbar .so-buttons select.so-layout-position {
1758
  vertical-align: baseline;
1759
  }
1760
+ .so-panels-dialog .so-visual-styles,
1761
+ .gutenberg .so-visual-styles {
1762
  margin: -15px;
1763
  height: auto;
1764
  /* All the field types */
1765
  }
1766
+ .so-panels-dialog .so-visual-styles h3,
1767
+ .gutenberg .so-visual-styles h3 {
1768
  line-height: 1em;
1769
  margin: 0;
1770
  padding: 20px 15px;
1771
  border-bottom: 1px solid #ddd;
1772
  }
1773
+ .so-panels-dialog .so-visual-styles .style-section-head,
1774
+ .gutenberg .so-visual-styles .style-section-head {
1775
  background: #ffffff;
1776
  padding: 15px 10px;
1777
  border-bottom: 1px solid #ddd;
1781
  -ms-user-select: none;
1782
  user-select: none;
1783
  }
1784
+ .so-panels-dialog .so-visual-styles .style-section-head h4,
1785
+ .gutenberg .so-visual-styles .style-section-head h4 {
1786
  margin: 0;
1787
  }
1788
+ .so-panels-dialog .so-visual-styles .style-section-fields,
1789
+ .gutenberg .so-visual-styles .style-section-fields {
1790
  padding: 15px;
1791
  border-bottom: 1px solid #ddd;
1792
  background: #F7F7F7;
1793
  }
1794
+ .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper,
1795
+ .gutenberg .so-visual-styles .style-section-fields .style-field-wrapper {
1796
  margin-bottom: 20px;
1797
  }
1798
+ .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper:last-child,
1799
+ .gutenberg .so-visual-styles .style-section-fields .style-field-wrapper:last-child {
1800
  margin-bottom: 0;
1801
  }
1802
+ .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper > label,
1803
+ .gutenberg .so-visual-styles .style-section-fields .style-field-wrapper > label {
1804
  font-weight: bold;
1805
  display: block;
1806
  margin-bottom: 3px;
1807
  }
1808
+ .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper .style-field,
1809
+ .gutenberg .so-visual-styles .style-section-fields .style-field-wrapper .style-field {
1810
  zoom: 1;
1811
  }
1812
+ .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper .style-field:before,
1813
+ .gutenberg .so-visual-styles .style-section-fields .style-field-wrapper .style-field:before {
1814
  content: '';
1815
  display: block;
1816
  }
1817
+ .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper .style-field:after,
1818
+ .gutenberg .so-visual-styles .style-section-fields .style-field-wrapper .style-field:after {
1819
  content: '';
1820
  display: table;
1821
  clear: both;
1822
  }
1823
+ .so-panels-dialog .so-visual-styles .style-section-fields .style-field-wrapper .style-field input,
1824
+ .gutenberg .so-visual-styles .style-section-fields .style-field-wrapper .style-field input {
1825
  font-size: 12px;
1826
  }
1827
+ .so-panels-dialog .so-visual-styles .style-input-wrapper,
1828
+ .gutenberg .so-visual-styles .style-input-wrapper {
1829
  zoom: 1;
1830
  }
1831
+ .so-panels-dialog .so-visual-styles .style-input-wrapper:before,
1832
+ .gutenberg .so-visual-styles .style-input-wrapper:before {
1833
  content: '';
1834
  display: block;
1835
  }
1836
+ .so-panels-dialog .so-visual-styles .style-input-wrapper:after,
1837
+ .gutenberg .so-visual-styles .style-input-wrapper:after {
1838
  content: '';
1839
  display: table;
1840
  clear: both;
1841
  }
1842
+ .so-panels-dialog .so-visual-styles .style-input-wrapper input,
1843
+ .gutenberg .so-visual-styles .style-input-wrapper input {
1844
  max-width: 100%;
1845
  }
1846
+ .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-inputs,
1847
+ .gutenberg .so-visual-styles .style-field-measurement .measurement-inputs {
1848
  overflow: auto;
1849
  margin: 0 -3px 4px -3px;
1850
  }
1851
+ .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper,
1852
+ .gutenberg .so-visual-styles .style-field-measurement .measurement-wrapper {
1853
  box-sizing: border-box;
1854
  float: left;
1855
  width: 25%;
1856
  padding: 0 3px;
1857
  }
1858
+ .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value,
1859
+ .gutenberg .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value {
1860
  border-width: 1px;
1861
  display: block;
1862
  max-width: 100%;
1863
  }
1864
+ .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-top,
1865
+ .gutenberg .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-top {
1866
  box-shadow: inset 0 2px 1px rgba(0, 115, 170, 0.35);
1867
  }
1868
+ .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-right,
1869
+ .gutenberg .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-right {
1870
  box-shadow: inset -3px 0 2px rgba(0, 115, 170, 0.35);
1871
  }
1872
+ .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-bottom,
1873
+ .gutenberg .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-bottom {
1874
  box-shadow: inset 0 -2px 1px rgba(0, 115, 170, 0.35);
1875
  }
1876
+ .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-left,
1877
+ .gutenberg .so-visual-styles .style-field-measurement .measurement-wrapper .measurement-value.measurement-left {
1878
  box-shadow: inset 3px 0 2px rgba(0, 115, 170, 0.35);
1879
  }
1880
+ .so-panels-dialog .so-visual-styles .style-field-measurement .measurement-unit-multiple,
1881
+