
/*	CSS classes and styles for the editor and the preview  */

body {
	margin:0;
	overflow: hidden;
}

body.iframe {
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	background: #dfe7ec;
}

.grid_maker_wrap {
	background: #333;
	font-family: 'Verdana', Arial;
	font-size: 12px;
	color:#E2E2E2;
	padding:6px;
}

span.zenario_grid_setting_warning,
span.zenario_grid_setting_warning input {
	background-image: none;
	background-color: pink;
}

ul.zenario_grids {
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0 0 30px 0;
	height: auto;
}

.zenario_overflow_wrap {
    min-width: 100%;
    overflow-x: hidden;
}

.zenario_overflow_wrap > .zenario_grids {
    background: white top left repeat-y;
    background-size: auto 25px;
}

.zenario_overflow_wrap > ul.zenario_grids:first-child {
	min-height:400px;
}

li.zenario_grid_add,
li.zenario_grid_cell {
	position:relative;
	float: left;
	min-height: 50px;
	padding: 0;
}
li.zenario_grid_add {
	cursor: pointer;
}
li.zenario_grid_cell {
	cursor: move;
}

.zenario_grid_sortable_target div {
	height: 100%;
	border: 2px dotted #008000;
	background-position: 0.5px 0;
}

.zenario_grids a.zenario_grid_sortable_target {
	display:inline-block;
	float:left;
	margin-top: 10px;
}

body.webkit .zenario_grids a.zenario_grid_sortable_target {
	height:60px;
}

.zenario_grids a.zenario_grid_sortable_target div {
	display:block;
	width:100%;
	height:58px;
	padding:0;
	border: 2px dotted #008000;
	background:#f6f6f6;
	box-sizing: border-box;
}

.zenario_grid_cell_size {
	color:#333;
}

.zenario_grids .zenario_grids {
	background: url('../admin/images/10.png');
	outline: grey 1px solid;
}

.zenario_grids .zenario_grid_cell .ui-resizable-handle {
	position: absolute;
    font-size: 0.1px;
    display: block;
     -ms-touch-action: none;
    touch-action: none;
    
	width: 11px;
	height: 18px;
	margin-right:2px;
	margin-top:-6px;
	background: url('../admin/images/grid_maker/icon-resize.png');
	cursor: e-resize;
}

.zenario_grids .zenario_grid_resp_child .ui-resizable-handle {
	visibility: hidden;
}

.ui-resizable-helper {
	text-align: center;
	font-family: 'Trebuchet MS', Arial;
	font-size: 12px;
}

body.zenario_grid_resizing_nest .ui-resizable-helper div.zenario_resizing_border,
body.zenario_grid_resizing_space_cell .ui-resizable-helper div.zenario_resizing_border {
	border: 2px dotted black;
}

body.zenario_grid_resizing_cell .ui-resizable-helper div.zenario_resizing_border {
	border: 2px dotted red;
}

.zenario_size_when_resizing {
	font-family:'Verdana', Arial;
	font-size:12px;
	bottom:0;
	right:0;
	position:absolute;
}

.ui-resizable-helper div.zenario_size_when_resizing {
	margin: 20px;
	text-align:left;
	padding-left:5px;
}

div.zenario_grid_gutter {
	width: auto;
	/*height: 100%;*/
	overflow: hidden;
}

div.zenario_grid_wrap {
	float: left;
}

div.zenario_grid_cell_info {
	position: absolute;
	top: 12px;
	display: block;
	width: 24px;
	height: 24px;
	background: url('../admin/images/grid_maker/info-icon.png');
	cursor: help;
}

div.zenario_grid_delete {
	position: absolute;
	top: 12px;
	display: block;
	width: 24px;
	height: 24px;
	background: url('../admin/images/icon-trash-can.svg') no-repeat center center / auto 15px;
	cursor: pointer;
}

.zenario_grid_faux_block,
.zenario_grid_faux_block_r,
.zenario_grid_faux_block_t {
	width:22px;
	height:1px;
	float:left;
    clear:left;
}

.zenario_grid_faux_block_r {
	float:right;
}

.zenario_grid_faux_block_t {
	height:11px;
}

div.zenario_grid_name_area,
div.area_first {
    float: left;
    clear: right;
	overflow:hidden;
}

div.zenario_grid_object_properties,
div.zenario_grid_cell_show_hide_first span {
	margin-left:5px;
}

div.zenario_grid_object_properties {
	float:left;
	/*margin-right: 22px;*/
}

div.zenario_grid_cell_size {
	float:right;
	margin-right:10px;
}

div.zenario_grid_object_properties {
	width: 100%;
}

div.zenario_grid_name_area {
	max-width:100%;
	height:60px;
}

/*div.zenario_grid_object_properties div {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}*/

div.zenario_grid_object_properties span {
	display:inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

div.zenario_grid_object_properties span.zenario_grid_object_edit_properties {
	max-width:calc(100% - 30px);
}

div.zenario_grid_object_properties span,
div.zenario_grid_cell_show_hide_first span {
	cursor: text;
	color:#333;
}

div.zenario_grid_object_properties span.show_mobile,
div.zenario_grid_object_properties span.show_desktop,
div.zenario_grid_object_properties span.show_first {
	position:relative;
	padding-left:16px;
}

div.zenario_grid_object_properties span.show_mobile:before,
div.zenario_grid_object_properties span.show_desktop:before,
div.zenario_grid_object_properties span.show_first:before {
	content:"";
	width:16px;
	height:16px;
	display:inline-block;
	position:absolute;
	left:0;
}
	
div.zenario_grid_object_properties span.show_mobile:before {
	background:url('../admin/images/grid_maker/mobile-icon-orange.svg') no-repeat 0 center / auto 15px;
}

div.zenario_grid_object_properties span.show_desktop:before {
	background:url('../admin/images/grid_maker/desktop-icon-orange.svg') no-repeat 0 center / 12px auto;
}

div.zenario_grid_object_properties span.show_first:before {
	background:url('../admin/images/grid_maker/mobile-icon-orange-arrow.svg') no-repeat 0 center / auto 15px;
}

div.zenario_grid_object_properties span.zenario_grid_slot_contents,
#colorbox.zenario_grid_box.zenario_grid_rename_slot_box .content_wrap #zenario_grid_slot_contents span,
#colorbox.zenario_grid_box.zenario_grid_rename_slot_box .content_wrap #zenario_grid_slot_columns > span {
	display:inline-block;
    padding: 1px 5px 2px;
	font-size: 11px;
    background: #d6e1e6;
    color: #4f7081;
}

div.zenario_grid_object_properties span.zenario_grid_slot_contents {
	max-width: calc(100% - 35px);
    margin-top:4px;
}

div.zenario_grid_cell_resp_options,
div.zenario_grid_cell_show_hide_first {
	clear:both;
	margin-top:10px;
	overflow: hidden;
}

div.zenario_grid_cell_show_hide_first span {
	clear:both;
	display:inline-block;
	overflow:hidden;
}

.zenario_grid_object_edit_properties {
	padding-right:22px;
}

.zenario_grid_object_edit_properties:hover {
	cursor:pointer;
	background: right center no-repeat url('../admin/images/icon-pencil.svg');
	background-size:auto 18px;
}

div.zenario_slot div.zenario_grid_object_properties span.zenario_grid_object_properties_wrap {
	display:block;
}

div.zenario_grid_cell_resp_options select,
div.zenario_grid_cell_show_hide_first label,
div.zenario_grid_cell_show_hide_first input {
	margin:0;
	padding:0;
	float:left;
}

div.zenario_grid_cell_resp_options select,
div.zenario_grid_cell_show_hide_first input {
	margin:2px 0 0 2px;
}

form.zenario_grid_form {
	/*height: 7em;*/
	height:auto;
	/*width: 20em;*/
}

#zenario_grid_slotname_error {
	display: none;
	color: #800000;
}

a.zenario_grid_add_slot,
a.zenario_grid_add_space,
a.zenario_grid_add_children,
a.zenario_grid_add_grid_break,
a.zenario_grid_add_grid_break_with_slot {
	cursor: pointer;
}

div.zenario_add_cell {
	padding: 10px 0;
	border: #808080 2px dashed;
	margin-top: 10px;
	background: #F5F5F5 url('../admin/images/grid_maker/add-icon-v2.png') no-repeat center center;
	opacity:0.8;
}

div.zenario_grid_border {
	overflow:hidden;
	/*border-bottom-style: none;*/
	padding: 10px 0 5px;
	border: red 2px solid;
	margin-top: 10px;
	margin-bottom: 10px;
	background: url('../admin/images/grid_maker/white-bg.png');
	color:#333;
	font-family: 'Verdana', Arial;
	font-size: 12px;
}

div.slot div.zenario_grid_border {
	text-align: center;
}

div.zenario_grid_space {
	padding: 10px 0;
	margin-top: 10px;
	margin-bottom: 10px;
	background: url('../admin/images/10.png');
	border: 0;
}

div.zenario_grid_break_outer_wrap {
	padding-top: 10px;
	padding-bottom: 10px;
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_no_slot {
	overflow:initial;
	border:0;
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_with_slot,
div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_no_slot {
	margin-left: 0 !important; /* overwrite inline styles */
	margin-right: 0 !important; /* overwrite inline styles */
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_with_slot {
	border-left:0;
	border-right:0;
	padding-left:7px;
	padding-right:7px;
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_no_slot {
	background:#9da9af;
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_no_slot:before,
div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_no_slot:after {
	content: '.';
	width: 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	display: block;
	overflow: hidden;
	visibility: hidden;
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_no_slot:before,
div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_no_slot:after {
    background:linear-gradient(45deg, #9da9af 25%, transparent 25%), linear-gradient(-45deg, #9da9af 25%, transparent 25%);
    background-position-x: 0%, 0%;
    background-position-y: 0%, 0%;
    background-repeat: repeat, repeat;
    background-size: auto, auto;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 10px 10px;
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    position: relative;
    top: -10px;
    left: 0px;
    
    visibility:visible;
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_no_slot:after {
	clear: both;
    transform:rotate(180deg);
    top:auto;
    bottom: -10px;
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_with_slot {
	position: relative;
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_with_slot:before,
div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_with_slot:after {
	top: 0;
  	left: 0;
  	content: '';
  	width: 10px;
  	height: 100%;
  	position: absolute;
  	background-color: #c5ac5a;
  	background: linear-gradient(-137deg, #9da9af 6px, transparent 0) 0 5px, linear-gradient(320deg, #9da9af 5px, transparent 0) 0 5px;
  	background-position: left;
  	background-repeat: repeat-y;
  	background-size:10px 10px;
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_with_slot:before {
  	top: 0;
  	transform: scaleX(-1);
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_with_slot:after {
	left:auto;
  	right: 0;
  	transform: scaleX(1);
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_no_slot div.zenario_grid_delete {
	top:16px;
}

div.zenario_grid_break_outer_wrap > .zenario_grid_break.zenario_grid_break_no_slot .zenario_grid_delete + div {
	display:none;
}

div.zenario_grid_break_no_slot {
	border: #6b90a7 1px solid;
	background: url('../admin/images/10.png');
}

div.zenario_grid_break_with_slot {
}

div.zenario_grid_break_outer_wrap div.zenario_grid_border {
	margin-top: 0;
	margin-bottom: 0;
}

/*  Different Grid Heights, taller  */

body.iframe div.zenario_grid_border {
	padding-left:5px;
	text-align:left;
	line-height:35px;
}

body.iframe > .slot > div.zenario_grid_border {
	height: 40px;
}








/* Settings area 
--------------------------------------------------------------------------------------------------*/

#settings .zenario_grid_options {
	display: block;
	clear:both;
	background:url('../admin/images/grid_maker/border.gif') repeat-x bottom;
	padding-left:25px;
}

#settings .zenario_grid_options .zenario_grid_type,
#settings .zenario_grid_options .zenario_grid_resp_and_rtl,
#settings .zenario_grid_options .zenario_grid_dims {
	float:left;
}

#settings .zenario_grid_options .zenario_grid_type,
#settings .zenario_grid_options .zenario_grid_resp_and_rtl,
#settings .zenario_grid_options .zenario_grid_dims {
	padding:12px 0;
}

#settings .zenario_grid_options .zenario_grid_resp_and_rtl {
	padding-left:2px;
	background:url('../admin/images/grid_maker/vertical-divider.gif') no-repeat left;
}

#settings .zenario_grid_i {
	width:16px;
	height:16px;
	display:block;
	font-size:0;
	line-height:0;
	background:url('../admin/images/grid_maker/icon-info.svg') no-repeat 0 0 / 16px 16px;
	margin-left:5px;
}

#settings .zenario_grid_type input,
#settings .zenario_grid_type label,
#settings .zenario_grid_type span,
#settings .zenario_grid_resp_and_rtl input,
#settings .zenario_grid_resp_and_rtl label,
#settings .zenario_grid_resp_and_rtl span {
	float:left;
}

#settings .zenario_grid_type input,
#settings .zenario_grid_resp_and_rtl input {
	margin-left:25px;
}

#settings .zenario_grid_type input:first-child,
#settings .zenario_grid_options .zenario_grid_dims label:first-child {
	margin-left:0;
}

#settings .zenario_grid_type span,
#settings .zenario_grid_resp_and_rtl span {
	margin-right:20px;
}

#settings .zenario_grid_options .zenario_grid_dims span {
	margin-right: 8px;
}

#settings .zenario_grid_options .zenario_grid_dims > p {
	margin: 0;
}

#settings .zenario_grid_options .zenario_grid_dims > p:nth-child(2) {
	margin-top: 10px;
}

#settings .zenario_grid_options .zenario_grid_dims select.zenario_grid_setting_col_and_gutter {
	padding:5px;
}

#settings label.comma {
	margin: auto 10px auto -10px;
}

#settings .zenario_grid_undo_redo {
	width:80px;
	height:30px;
	padding:10px 40px 10px 10px;
	float:left;
}

#settings .zenario_grid_undo_redo a.zenario_grid_setting_undo,
#settings .zenario_grid_undo_redo a.zenario_grid_setting_redo {
	width:30px;
	height:30px;
	display:block;
	float:left;
	font-size:0;
	line-height:0;
	margin-left:10px;
	cursor:pointer;
}

#settings .zenario_grid_undo_redo a.zenario_grid_setting_undo,
#settings .zenario_grid_undo_redo a.zenario_grid_setting_undo.zenario_grid_setting_undo_disabled:hover {
	background:url('../admin/images/grid_maker/undo-off-state.svg') no-repeat 0 0 / 30px 30px;
}

#settings .zenario_grid_undo_redo a.zenario_grid_setting_redo,
#settings .zenario_grid_undo_redo a.zenario_grid_setting_redo.zenario_grid_setting_redo_disabled:hover {
	background:url('../admin/images/grid_maker/redo-off-state.svg') no-repeat 0 0 / 30px 30px;
}

#settings .zenario_grid_undo_redo a.zenario_grid_setting_undo:hover {
	background:url('../admin/images/grid_maker/undo-hover-state.svg') no-repeat 0 0 / 30px 30px;
}

#settings .zenario_grid_undo_redo a.zenario_grid_setting_redo:hover {
	background:url('../admin/images/grid_maker/redo-hover-state.svg') no-repeat 0 0 / 30px 30px;
}

#settings .zenario_grid_setting_undo_disabled,
#settings .zenario_grid_setting_redo_disabled {
	opacity: 0.5;
	cursor:default !important;
}

#settings .download_links_box_middle {
	display:inline-block;
	float:left;
}

#settings .download_links_box_middle .download_links_box_middle_wrapper {
	padding-left:0 !important;
}

#settings .download_links_box_middle h3,
#settings .download_links_box_middle .zenario_grid_save,
#settings .download_links_box_middle .zenario_grid_save_as {
	float:left;
}

#settings .download_links_box_middle .zenario_grid_save,
#settings .download_links_box_middle .zenario_grid_save_as {
	float:left;
	margin-left:8px;
	margin-top:3px;
}

#settings .ui-widget-content {
	border:0 !important;
}

#settings .ui-corner-all, 
#settings .ui-corner-bottom, 
#settings .ui-corner-right, 
#settings .ui-corner-br,
#settings .ui-corner-top, 
#settings .ui-corner-right, 
#settings .ui-corner-tr {
	-webkit-border-radius: 0;
	border-radius: 0;
}

#settings .ui-state-default, 
#settings .ui-widget-content .ui-state-default, 
#settings .ui-widget-header .ui-state-default  {
	border:0;
}



/* Grid area 
--------------------------------------------------------------------------------------------------*/

.grid_panel_wrap {
	width:auto;
	float:none;
	clear:both;
	overflow:hidden;
	padding: 10px 0 10px 5px;
	background:#F5F5F5 url('../admin/images/grid_maker/grid-panel-bg-shadow.gif') repeat-x bottom;
}

.grid_panel_wrap #grid {
	width:100% !important;
	margin:0 !important;
	position:relative;
}

.grid_panel_wrap #grid.zenario_grid_slot_view {
	overflow-x:auto;
}

#grid-slider .ui-state-default, 
#grid-slider .ui-widget-content .ui-state-default, 
#grid-slider .ui-widget-header .ui-state-default {
	border:0 !important;
	background:#343434;
}

#grid-slider.ui-slider .ui-slider-handle {
	width:8px;
}

#grid-slider.ui-slider .ui-slider-handle span {
	width:8px;
	width: 47px;
	height: 77px;
	display: block;
	float: left;
	position: relative;
	bottom: 39px;
	right: 19px;
	background:url('../admin/images/grid_maker/slide-arrows-off.png') no-repeat;
}

#grid-slider.ui-slider .ui-slider-handle:hover span {
	background:url('../admin/images/grid_maker/slide-arrows-over.png') no-repeat;
}

#grid-slider .ui-corner-all, 
#grid-slider .ui-corner-bottom, 
#grid-slider .ui-corner-right, 
#grid-slider .ui-corner-br {
	border-bottom-right-radius:2px
}

#grid-slider .ui-corner-all, 
#grid-slider .ui-corner-bottom, 
#grid-slider .ui-corner-left, 
#grid-slider .ui-corner-bl {
    border-bottom-left-radius: 2px;
}

#grid-slider .ui-corner-all, 
#grid-slider .ui-corner-top, 
#grid-slider .ui-corner-right, 
#grid-slider .ui-corner-tr {
    border-top-right-radius: 2px;
}

#grid-slider .ui-corner-all, 
#grid-slider .ui-corner-top, 
#grid-slider .ui-corner-left, 
#grid-slider .ui-corner-tl {
    border-top-left-radius: 2px;
}

#settings .zenario_grid_options:after,
div.zenario_grid_cell_size:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.ie #settings .zenario_grid_options {
    zoom: 1;
}


div.zenario_grid_download_bg {
	text-align: center;
}

#colorbox textarea {
	width: 50em;
	height: 30em;
}



/* Wiggly lines for the header and footer
--------------------------------------------------------------------------------------------------*/

/*
	Note: This is some initial placeholder code,
	copied from https://stackoverflow.com/questions/17285514/is-it-possible-to-make-a-squiggly-line
*/

div.wiggly_line {
    position: relative;
    height: 15px;
    display: none;
}

body.zenario_gm_editing_header div.wiggly_line_for_header,
body.zenario_gm_editing_footer div.wiggly_line_for_footer {
	display: block;
}

body.zenario_gm_editing_header .zenario_overflow_wrap {
	position:relative;
	padding-bottom:15px;
}

body.zenario_gm_editing_header .zenario_overflow_wrap .wiggly_line_for_header {
	position:absolute;
	bottom:0;
	transform:rotate(-180deg);
}

div.wiggly_line.wiggly_line_for_footer,
div.wiggly_line.wiggly_line_for_header {
	border-bottom:5px solid #C6D5DD;
}

div.wiggly_line.wiggly_line_for_footer:before,
div.wiggly_line.wiggly_line_for_header:after {
  	content: "";
  	position: absolute;
  	left: 0;
  	bottom: 0;
  	right: 0;
  	background-repeat: repeat;
  	height: 10px;
  	background-size: 20px 20px;
  	background-image:radial-gradient(circle at 10px -5px, transparent 12px, #C6D5DD 13px);
}

div.wiggly_line.wiggly_line_for_footer:after,
div.wiggly_line.wiggly_line_for_header:before {
  	content: "";
  	position: absolute;
  	left: 0;
  	bottom: 0;
  	right: 0;
  	background-repeat: repeat;
  	height: 15px;
  	background-size: 40px 20px;
  	background-image:radial-gradient(circle at 10px 15px, #C6D5DD 12px, transparent 13px);
}



/* Some placeholder styles for the reworked header
--------------------------------------------------------------------------------------------------*/

.zenario_gmControls {
	display: inline-block;
	float: left;
	width: auto;
	border: none;
	padding: 12px 0;
}

.zenario_gmControls_right {
	float: right;
	padding-right: 50px;
}

.zenario_gmControls_sepBlock {
	padding-left: 2px;
	background: url('../admin/images/grid_maker/vertical-divider.gif') no-repeat left;
}

.zenario_gmControls_newLine {
	clear: left;
}

.zenario_gmControls .zfab_row,
.zenario_gmControls .zfab_row .title,
.zenario_gmControls .zfab_row .zfab_row_fields {
	display: inline-block;
}

.zenario_gmControls .zenario_group_2_cols {
    min-width: unset;
}

.zenario_gmControls .zenario_field_tooltip {
	display: inline-block;
	margin-right: 20px;
	margin-left: 5px;
	width: 16px;
	height: 16px;
	text-indent: -99999px;
	background: url('../admin/images/grid_maker/icon-info.svg') no-repeat 0 0 / 16px 16px;
}

.zenario_gmControls .unredo {
	width: 30px;
	height: 30px;
	display: block;
	float: left;
	font-size: 0;
	line-height: 0;
	margin-left: 10px;
	cursor: pointer;
	border: none;
}

.zenario_gmControls .undo {
	background:url('../admin/images/grid_maker/undo-off-state.svg') no-repeat 0 0 / 30px 30px;
}

.zenario_gmControls .redo {
	background:url('../admin/images/grid_maker/redo-off-state.svg') no-repeat 0 0 / 30px 30px;
}

.zenario_gmControls .undo.enabled:hover {
	background:url('../admin/images/grid_maker/undo-hover-state.svg') no-repeat 0 0 / 30px 30px;
}

.zenario_gmControls .redo.enabled:hover {
	background:url('../admin/images/grid_maker/redo-hover-state.svg') no-repeat 0 0 / 30px 30px;
}

.zenario_gmControls .unredo.disabled {
	opacity: 0.5;
	cursor: default;
}


/* Buttons
--------------------------------------------------------------------------------------------------*/

	form.zenario_grid_form .nice_button,
	#settings .nice_button {
		-webkit-border-radius: 4px;
		border-radius: 4px;
	}

	form.zenario_grid_form .nice_button,
	#settings .nice_button {
		float: left;
		width: auto !important;
		width: 1px;
		white-space: nowrap;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		margin-right:10px;
	}
	
	#settings .nice_button {
		margin-right:0;
	}
	
	form.zenario_grid_form .nice_button .r,
	#settings .nice_button .r {
		float:right;
	}
	
	form.zenario_grid_form .nice_button .i,
	#settings .nice_button .i {
		border: none;
		float: left;
		margin: 0;
	}
	
	form.zenario_grid_form .nice_button:hover,
	#settings .nice_button:hover {
		cursor:pointer;
		cursor:hand;
	}

	/* Fix for IE7 */

	form.zenario_grid_form .nice_button .r,
	#settings .nice_button .r {
		float: none;
	}

	form.zenario_grid_form .nice_button .i,
	#settings .nice_button .i {
		float: none;
		display:block;
	}
	
	/* default settings */

	form.zenario_grid_form .nice_button,
	form.zenario_grid_form .nice_button .r,
	form.zenario_grid_form .nice_button .i,
	#settings .nice_button,
	#settings .nice_button .r,
	#settings .nice_button .i {
		height: 30px;
	}
	
	form.zenario_grid_form .nice_button,
	form.zenario_grid_form .nice_button .r,
	form.zenario_grid_form .nice_button .i  {
		height: 31px;
	}
	
	form.zenario_grid_form .nice_button,
	#settings .nice_button,
	form.zenario_grid_form .nice_button .i,
	#settings .nice_button .i {
		background: #36b6d3; /* Old browsers */
		background: -moz-linear-gradient(top, #36b6d3 0%, #0699c5 34%, #008ab3 65%, #0085ac 100%); /* FF3.6-15 */
		background: linear-gradient(to bottom, #36b6d3 0%,#0699c5 34%,#008ab3 65%,#0085ac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		-webkit-border-radius:4px;
		border-radius:4px;
	}
	
	form.zenario_grid_form .nice_button:hover,
	#settings .nice_button:hover,
	form.zenario_grid_form .nice_button .i:hover,
	#settings .nice_button .i:hover {
		background: #0085ac; /* Old browsers */
		background: -moz-linear-gradient(top, #0085ac 0%, #0699c5 34%, #008ab3 65%, #36b6d3 100%); /* FF3.6-15 */
		background: linear-gradient(to bottom, #0085ac 0%,#0699c5 34%,#008ab3 65%,#36b6d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	
	form.zenario_grid_form .nice_button,
	#settings .nice_button,
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	
	form.zenario_grid_form .nice_button .i,
	#settings .nice_button .i {
		padding: 0px 15px 4px 15px;
	}
	
	form.zenario_grid_form .nice_button a.i,
	#settings .nice_button a.i {
		height:24px;
		padding: 6px 15px 0 15px;
	}
	
	form.zenario_grid_form .nice_button .i,
	#settings .nice_button .i {
    	font-weight:bold;
		color:#fff;
		font-size:14px;
		text-shadow:0 1px 1px #000;
		cursor:pointer;
	}
	
	form.zenario_grid_form .nice_button a,
	form.zenario_grid_form .nice_button a:hover,
	#settings .nice_button a,
	#settings .nice_button a:hover {
		text-decoration:none;
	}
	
/* Slots view
--------------------------------------------------------------------------------------------------*/
	
	#colorbox.zenario_grid_maker #colorbox {
		color:#333;
	}

/* Popups
--------------------------------------------------------------------------------------------------*/

	#cboxOverlay {
		opacity: 0.5 !important;
		background-color:#000;
		background-image:none;
	}

	#colorbox.zenario_grid_box #cboxTopLeft,
	#colorbox.zenario_grid_box #cboxTopCenter,
	#colorbox.zenario_grid_box #cboxTopRight,
	#colorbox.zenario_grid_box #cboxMiddleLeft,
	#colorbox.zenario_grid_box #cboxMiddleRight,
	#colorbox.zenario_grid_box #cboxBottomLeft,
	#colorbox.zenario_grid_box #cboxBottomCenter,
	#colorbox.zenario_grid_box #cboxBottomRight,
	#colorbox.zenario_grid_box #cboxTitle,
	#colorbox.zenario_grid_box #colorbox #cboxTopLeft,
	#colorbox.zenario_grid_box #colorbox #cboxTopCenter,
	#colorbox.zenario_grid_box #colorbox #cboxTopRight,
	#colorbox.zenario_grid_box #colorbox #cboxMiddleLeft,
	#colorbox.zenario_grid_box #colorbox #cboxMiddleRight,
	#colorbox.zenario_grid_box #colorbox #cboxBottomLeft,
	#colorbox.zenario_grid_box #colorbox #cboxBottomCenter,
	#colorbox.zenario_grid_box #colorbox #cboxBottomRight,
	#colorbox.zenario_grid_box #colorbox #cboxTitle {
		visibility: hidden;
	}
	
	#colorbox.zenario_grid_box #cboxLoadedContent {
    	/*height: 100% !important;*/
		margin-bottom:0;
	}
	
	#colorbox.zenario_grid_new_layout_box #cboxLoadedContent,
	#colorbox.zenario_grid_rename_slot_box #cboxLoadedContent {
		padding-bottom:100px;
	}
	
	.zfea_popout .zfea_close,
	#colorbox.zenario_grid_box #cboxClose {
    	background: url("../admin/images/grid_maker/popup-close-btn-off-state.png") no-repeat 0 0;
    	top: 5px;
    	width: 27px;
    	height: 27px;
    	position: absolute;
    	right: 5px;
    	cursor: pointer;
    	
    	border:1px solid #ccc;
    	border-radius: 2px;
		background: #efefef url("../admin/images/grid_maker/icon-cross-close-dark.svg") no-repeat center center / 14px 14px;
		-webkit-transition: background-color 0.2s ease-in-out;
    	-moz-transition: background-color 0.2s ease-in-out;
    	transition: background-color 0.2s ease-in-out;
	
	}

	.zfea_popout .zfea_close:hover,
	#colorbox.zenario_grid_box #cboxClose:hover {
    	border-color:#AAA;
		background: #ededed url("../admin/images/grid_maker/icon-cross-close-blue.svg") no-repeat center center / 14px 14px;
	}
	
	#colorbox.zenario_grid_box #cboxContent {
		background:#F5F5F5;
		color:#333;
		border:6px solid #626262;
		-webkit-border-radius: 6px;
		border-radius: 6px;
	}

	#colorbox.zenario_grid_box {
		font-family: 'Verdana', Arial;
		font-size: 12px;
		padding:6px;
	}
	
	#colorbox.zenario_grid_box .content_wrap {
		overflow:hidden;
		padding:10px 10px 80px;
	}
	
	#colorbox.zenario_grid_box .content_wrap p {
		margin-top:0;
		margin-bottom:5px;
	}
	
	#colorbox.zenario_grid_box #cboxContent .align_center {
		text-align:center;
	}
	
	#colorbox.zenario_grid_box.zenario_grid_rename_slot_box .content_wrap {
		/*height:330px;*/
		padding-bottom:10px;
	}
	
	#colorbox.zenario_grid_box.zenario_grid_rename_slot_box form.zenario_grid_form .content_wrap h3 {
		padding-bottom:10px;
	}
	
	#colorbox.zenario_grid_box.zenario_grid_rename_slot_box .content_wrap pre {
		width:calc(100% - 32px);
    	padding: 10px;
    	line-height: 1.4em;
    	font-size:11.5px;
		background: #eee;
    	border: 1px dashed #999;
    	color: #555;
	}
	
	#colorbox.zenario_grid_box.zenario_grid_rename_slot_box .content_wrap #zenario_grid_slot_contents,
	#colorbox.zenario_grid_box.zenario_grid_rename_slot_box .content_wrap #zenario_grid_slot_columns {
		margin-bottom:15px;
	}
	
	#colorbox.zenario_grid_box.zenario_grid_rename_slot_box .content_wrap #zenario_grid_slot_columns > span {
    	border: 2px solid red;
    	padding: 2px 10px 4px;
    	color: #1e4c68;
	}
	
	#colorbox.zenario_grid_box.zenario_grid_rename_slot_box .content_wrap #zenario_grid_error {
		padding-top:5px;
	}
	
	#colorbox.zenario_grid_add_cell_box .content_wrap {
		padding:20px 15px 10px;
	}
	
	#colorbox.zenario_grid_box.zenario_grid_rename_slot_box .nice_button {
		margin:auto;
		display:table;
		float:none;
		margin-top:10px;
	}
	
	.zenario_grid_add_cell_box h3 {
		width: calc(100% - 10px);
		position: relative;
		left: -10px;
		top: 0;
		padding: 8px 10px 10px 20px;
		margin:0;
		color:#FFF;
		background:#333 url('../admin/images/icon-drag-handle-white.svg') no-repeat left center / 30px 30px;
	}
	
	.zenario_grid_add_cell_box p,
	.zenario_grids a.ui-draggable {
		margin:8px 0;
		white-space:nowrap;
	}
	
	.zenario_grid_add_cell_box a,
	.zenario_grids a.ui-draggable {
		color:#333;
		padding:10px 10px 10px 70px;
		display:inline-block;
		cursor:pointer;
	}
	
	.zenario_grid_add_cell_box a:hover {
		
	}
	
	.zenario_grids a.ui-draggable {
		display:inline-block;
	}
	
	.grid_add_toolbar {
		position: absolute;
		float: right;
		right: 30px;
		z-index: 92;
		background:#FFFFFF;
		padding:0 10px 10px 10px;
		border:2px solid #333;
		-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);
		box-shadow:0 0 8px rgba(0,0,0,0.5);
	}
	
	.zenario_grid_add_cell_box a span,
	.zenario_grids a.ui-draggable span {
		padding:4px 8px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
	}
	
	.zenario_grid_add_cell_box p:hover a span,
	.zenario_grids a.ui-draggable span {
		background:#dcf5fd;
	}

	.zenario_grid_add_cell_box a.zenario_grid_add_slot,
	.zenario_grids a.ui-draggable.zenario_grid_add_slot {
		background:url('../admin/images/grid_maker/add-slot-icon.svg') no-repeat 0 0 / 60px 36px;
	}
	
	.zenario_grid_add_cell_box a.zenario_grid_add_space,
	.zenario_grids a.ui-draggable.zenario_grid_add_space {
		background:url('../admin/images/grid_maker/add-cell-with-empty-space-icon-v3.svg') no-repeat 0 0 / 60px 36px;
	}
	
	.zenario_grid_add_cell_box a.zenario_grid_add_children,
	.zenario_grids a.ui-draggable.zenario_grid_add_children {
		background:url('../admin/images/grid_maker/add-cell-with-nested-cells-icon.svg') no-repeat 0 0 / 60px 36px;
	}
	
	.zenario_grid_add_cell_box a.zenario_grid_add_grid_break,
	.zenario_grids a.ui-draggable.zenario_grid_add_grid_break {
		background:url('../admin/images/grid_maker/add-grid-break-placeholder-v5.svg') no-repeat 0 0 / 60px 36px;
	}
	
	.zenario_grid_add_cell_box a.zenario_grid_add_grid_break_with_slot,
	.zenario_grids a.ui-draggable.zenario_grid_add_grid_break_with_slot {
		background:url('../admin/images/grid_maker/add-slot-outside-grid-placeholder-v3.svg') no-repeat 0 0 / 60px 36px;
	}
	
	.zenario_grid_add_cell_box a,
	.zenario_grids a.ui-draggable {
		cursor: move; /* fallback if grab cursor is unsupported */
    	cursor: grab;
    	cursor: -moz-grab;
    	cursor: -webkit-grab;
	}
	
	/*
	.zenario_grid_add_cell_box a.zenario_grid_add_grid_break_group {
		background:url('../admin/images/grid_maker/add-grid-break-icon.png') no-repeat 0 0;
	}
	*/
	
	form.zenario_grid_form input[type="text"],
	#colorbox form.zenario_grid_form textarea {
		width:calc(100% - 22px);
		border:1px solid #333;
		padding:5px;
		margin-bottom:15px;
	}
	
	#colorbox form.zenario_grid_form textarea {
		height: 8em;
	}
	
	form.zenario_grid_form #zenario_grid_error {
		color:#FF0000;
		font-size:12px;
		padding-bottom:10px;
	}
	
	form.zenario_grid_form h3 {
		padding:0;
		margin:0;
	}
	
	.zenario_grid_copy_box textarea {
		padding:10px;
	}
	
	#toast-container {
		margin-right:240px;
	}
	
	.zenario_gm_editing_header #toast-container,
	.zenario_gm_editing_footer #toast-container {
		margin-right:140px;
	}
	
	#toast-container .toast-message {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		font-weight:bold;
	}
	
	#toast-container > div,
	#toast-container .toast-message a:hover {
        color: #FFF;
    }
    
    #toast-container > div {
        opacity: 0.95;
        width: 360px;
        -webkit-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: 0 0 18px rgba(0,0,0,.75);
		box-shadow: 0 0 18px rgba(0,0,0,.75);
    }

	.toast,
	.toast-success,
	.toast-error,
	.toast-info,
	.toast-warning {
   		background-color: #202020;
		border: solid 2px #bdbdbd;
	}
	
	#toast-container > .toast-success {
		background-image:url("../admin/images/grid_maker/tick.png") !important;
	}
	
	.grid_maker_wrap #close_button {
		background:url('../admin/images/icon-close-off.svg') no-repeat;
		background-size:100%;
    	width: 34px;
    	height: 34px;
    	position: absolute;
    	right: 6px;
    	top: 6px;
    	display:block;
    	cursor: pointer;
	}
	
	.grid_maker_wrap #close_button:hover {
		background:url('../admin/images/icon-close-over.svg') no-repeat;
    }
    
    #colorbox.zenario_grid_maker #cboxClose {
		display:none;
	}
	

/* RESPONSIVE STYLES
--------------------------------------------------------------------------------------------------*/

/* Layout max-width: 1280px
--------------------------------------------------------------------------------------------------*/

@media all and (max-width: 1281px) {

	.zenario_grouping__resp_area.zenario_gmControls {
		clear:left;
	}

}