table, thead, tbody, tr, th, td
	{
		border: none;
		border-spacing:0;
	}

	body.entity-type-system .wz.cell.block.blst-light1 h1
	{
		color: rgb(6,71,113);
	}


	body.edit h1,
	body.edit
	{
		font-family:'Baloo Chettan 2';
		font-weight:400;
		letter-spacing:0;
	}

	body.page-type-backend-table h1,
	body.page-name-page-backend h1
	{
		color: rgb(6,71,113)
	}



	body.edit {
		padding-top:70px;
		width:100%;
		margin:0 auto;
		font-size:calc(10px + (14 - 10) * ((100vw - 320px) / (1200 - 320)));
	}


	body #wz-edit-assets
	{
		position:fixed;
		z-index: 40;
		top:calc(40px + (60 - 40) * ((100vw - 320px) / (1200 - 320)));
		right:0;
		height:calc(100vh - 70px);
		width:500px;
		background-color:#f1f1f1;
		padding:0;
		overflow-y:auto;
		transition: all 0.5s;
	}

	body.assets-hide #wz-edit-content
	{
		width:calc(100vw - 48px);
	}

	body.assets-hide #wz-edit-assets
	{
		right:-464px;
	}

	/* set edit navigation bar */
	#wz-edit-header
	{
		display:flex;
		position:fixed;
		top:0;
		left:0;
		height:calc(40px + (60 - 40) * ((100vw - 320px) / (1200 - 320)));
		background-color:#444;
		width: 100vw;
		z-index:50;
		color:#fff;
	}

	body.edit .wz-edit-title
	{
		color:#fff;
		font-size:calc(16px + (20 - 16) * ((100vw - 320px) / (1200 - 320)));
	}


	body #wz-edit-content
	{
		width:calc(100vw - 320px);
		z-index:30;
	}




	body.edit
	{
		padding-top:calc(40px + (60 - 40) * ((100vw - 320px) / (1200 - 320)));
	}


	body.edit .tabgroup
	{
		width:100%;
	}


	body.edit .field-label label,
	body.edit .field-type-checkbox label
	{
		white-space:nowrap;
		font-weight:bold;
		font-size:calc(9px + (12 - 9) * ((100vw - 320px) / (1200 - 320)));
	}


	/* tab label */
	body.edit .tab-label > .ci > .cfo > .cfi > .cc
	{
		white-space:nowrap;
		font-weight:600;
		font-size:calc(9px + (12 - 9) * ((100vw - 320px) / (1200 - 320)));
		padding:calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));
		padding-top:calc(2px + (4 - 2) * ((100vw - 320px) / (1200 - 320)));
		padding-bottom:calc(2px + (4 - 2) * ((100vw - 320px) / (1200 - 320)));
	}


	/* tabgroup label */
	body.edit .tabgroup-label > .ci > .cfo > .cfi > .cc > h3,
	body.edit .label > .ci > .cfo > .cfi > .cc > h3
	{
		white-space:nowrap;
		font-size:calc(14px + (18 - 14) * ((100vw - 320px) / (1200 - 320)));
	}






/*
	body.edit .entity
	{
		width:100%;
	}
*/

	body.edit input[type="text"],
	body.edit input[type="url"],
	body.edit input[type="telephone"],
	body.edit input[type="email"],
	body.edit select,
	body.edit textarea
	{
		padding:6px;
	}




	::placeholder
	{
		opacity:1;
		color:#ccc;
	}





	/* entity header */
	body.edit .entity-header > .ci > .cfo > .cfi > .cc > h4
	{
		white-space:nowrap;
		font-size:calc(14px + (18 - 14) * ((100vw - 320px) / (1200 - 320)));
	}







	#wz-hideaway
	{
		display:none;
	}
	
	#wz-layer-background
	{
		display:none;
	}

	#wz-layer-wrapper > *
	{
		width:calc(300px + (500 - 300) * ((100vw - 320px) / (1200 - 320)));
		background-color:#fff;
		display: flex;
		flex-direction:column;
		justify-content:space-between;
		align-items:flex-start;
	}

	#wz-layer-wrapper .wz-dialog
	{
		cursor:default;
	}


	#wz-layer-wrapper .dialog-header,
	#wz-layer-wrapper .menu-header
	{
		display: flex;
		flex-direction:row;
		justify-content:space-between;
		padding:calc(6px + (10 - 6) * ((100vw - 320px) / (1200 - 320)));
		background-color:#ededed;
		width:100%;
	}


	#wz-layer-wrapper .dialog-footer,
	#wz-layer-wrapper .menu-footer
	{
		display: flex;
		flex-direction:row;
		justify-content:center;
		padding:calc(6px + (10 - 6) * ((100vw - 320px) / (1200 - 320)));
		background-color:#ededed;
		width:100%;
	}

	#wz-layer-wrapper .menu-items
	{
		display: flex;
		flex-direction:column;
		justify-content:flex-start;
		width:100%;
	}

	#wz-layer-wrapper .menu-items .menu-item a,
	#wz-layer-wrapper .menu-items .menu-item .menu-item-link
	{
		width:100%;
	}

	#wz-layer-wrapper .menu-items .menu-item a,
	#wz-layer-wrapper .menu-items .menu-item .menu-item-link,
	#wz-layer-wrapper .menu-items .menu-item.disabled
	{
		display:block;
		width:100%;
		border-top: 1px solid #ccc;
		padding-top:calc(6px + (10 - 6) * ((100vw - 320px) / (1200 - 320)));
		padding-bottom:calc(6px + (10 - 6) * ((100vw - 320px) / (1200 - 320)));
		padding-left:calc(10px + (16 - 10) * ((100vw - 320px) / (1200 - 320)));
		padding-right:calc(10px + (16 - 10) * ((100vw - 320px) / (1200 - 320)));
	}

	#wz-layer-wrapper .menu-items .menu-item:last-child a,
	#wz-layer-wrapper .menu-items .menu-item:last-child .menu-item-link
	{
		border-bottom: 1px solid #ccc;
	}

	#wz-layer-wrapper .menu-items .menu-item a:hover,
	#wz-layer-wrapper .menu-items .menu-item .menu-item-link:hover
	{
		background-color:#f1f1f1;
	}

	#wz-layer-wrapper .menu-items .menu-item.disabled
	{
		color:#ccc;
	}


	#usermenu
	{
		z-index:200;
		position: fixed;
		bottom:0;
		left: 50%;
		-webkit-transform: translate(-50%);
		-ms-transform: translate(-50%);
		transform: translate(-50%);
		padding:calc(6px + (10 - 6) * ((100vw - 320px) / (1200 - 320)));
		padding-left:calc(24px + (32 - 24) * ((100vw - 320px) / (1200 - 320)));
		padding-right:calc(24px + (32 - 24) * ((100vw - 320px) / (1200 - 320)));
		border-top-left-radius:12px;
		border-top-right-radius:12px;
		background-color: rgba(6,71,113,.7);
	}

	#usermenu i
	{
		cursor: pointer;
		color:#fff;
		font-size:calc(14px + (18 - 14) * ((100vw - 320px) / (1200 - 320)));
	}

	.menu-item i.menuitem-icon
	{
		padding-right:calc(18px + (32 - 18) * ((100vw - 320px) / (1200 - 320)));
	}



/*
	---------------------------------------------------------------
	table settings
	---------------------------------------------------------------
*/


	.wz.backend-list table
	{
		border-left:1px solid #ccc;
		border-right:1px solid #ccc;
		border-bottom:1px solid #ccc;
	}

	.wz.backend-list table th,
	.wz.backend-list table td
	{
		margin: 0;
		padding: 0;
		border: none;
		border-collapse: collapse;
		border-spacing: 0;
		vertical-align: inherit;
		text-align: left;
		font-weight: inherit;
		-webkit-border-horizontal-spacing: 0;
		-webkit-border-vertical-spacing: 0;

		border-top:1px solid #ccc;
		padding:8px;
	}

/* BETTER: add center class for td and th */
	.wz.backend-list table th.edit,
	.wz.backend-list table th.options,
	.wz.backend-list table td.edit,
	.wz.backend-list table td.options
	{
		text-align: center;
	}

	.wz.backend-list table th
	{
		background-color:#f1f1f1;
		white-space:nowrap;
	}

	.wz.backend-list table .column-sortable
	{
		background-color:#e3e3e3;
		padding:6px 12px;
		border-radius:3px;
		display:block;
		width:100%;
	}

	.wz.backend-list table .column-sortable:hover
	{
		background-color:#d3d3d3;
	}

	.wz.backend-list table th.sort-active a.column-sortable
	{
		background-color:#064771;
		color:#fff;
	}

	.wz.backend-list table .column-sortable i
	{
		padding-right:6px;
	}

	.wz.backend-list table td.options i
	{
		padding-left:6px;
		padding-right:6px;
		cursor:pointer;
	}


	.wz.backend-list table td.options i.fa-toggle-off
	{
		color:#444;
	}


	.wz.backend-list table i.fa-toggle-on
	{
		color:#15A052;
	}






/*	----------------------------------------------------
	CONTAINER - STYLE
	---------------------------------------------------- */
	body.edit .container.style-2
	{
		background-color: #fafafa;
	}

	body.edit .container.style-2 .containeritem-body
	{
		background-color: #fff;
	}




/*	----------------------------------------------------
	TABGROUP
	---------------------------------------------------- */

	body.edit .tabgroup.style-1 .tab-label,
	body.edit .tabgroup.style-1 .tab-pane
	{
		background-color: #fff;
	}

	body.edit .tabgroup.style-2 .tab-label,
	body.edit .tabgroup.style-2 .tab-pane
	{
		background-color: #fafafa;
	}

	body.edit .tabgroup.style-2 .tab-label
	{
		background-color: #f0f0f0;
	}

	body.edit .tabgroup.style-2 .tab-label.active
	{
		background-color: #fafafa;
	}


/*	----------------------------------------------------
	TAB - LABEL
	---------------------------------------------------- */

	body.edit .tab-label
	{
		cursor:pointer;
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		background-color #d1d1d1;
	}

	body.edit .tab-label.active {
		background-color #f1f1f1;
		border-bottom-color: #fafafa;
		z-index: 10;
	}

	body.edit .tab-label:last-child
	{
		border-right: 1px solid #ddd;
	}


/*	----------------------------------------------------
	TAB - PANE
	---------------------------------------------------- */


	body.edit .tabgroup-panes > .ci > .cfo > .cfi > .cc > .tab-pane {
		display:none;
	}

	body.edit .tabgroup-panes > .ci > .cfo > .cfi > .cc > .tab-pane.active {
		display:flex;
	}

	body.edit .tabgroup-panes {
		margin-top: -1px;
	}


/*	----------------------------------------------------
	FIELD - TEXTFIELD, TEXTAREA
	---------------------------------------------------- */

	body.edit input.wz-field[type="text"],
	body.edit textarea.wz-field
	{
		padding:calc(4px + (6 - 4) * ((100vw - 320px) / (1200 - 320)));
		font-size:calc(10px + (14 - 10) * ((100vw - 320px) / (1200 - 320)));
		color:#444;
		border:1px solid #ccc;
		border-radius:0;
	}


	.wz-field.invalid
	{
		border:2px solid #bb0000;
	}



	.wz.cell.image-preview
	{
		max-width:200px;
	}



/* ========================= */

.flfl-x.flva-center {
    align-items: center;
}

div.flfl-x {
    display: flex;
    flex-direction: row;
    flex: 1 0 auto;
    width: 100%;
    margin: calc(-2px + (-4 + 2) * ((100vw - 320px) / (1200 - 320)));
}

div.flfl-x > * {
    padding: calc(2px + (4 - 2) * ((100vw - 320px) / (1200 - 320)));
}



/* ========================= */

/* label sizes */
.wz.cell.container-label {
	font-size:calc(14px + (16 - 14) * ((100vw - 320px) / (1200 - 320)));
}

.wz.cell.containeritem-label {
	font-size:calc(14px + (16 - 14) * ((100vw - 320px) / (1200 - 320)));
}


.sortable-ghost {
	opacity: 0.7;
}

.wz-sortable
{
	padding-top:4px;
}


/* height of space when sorting elements */
.sort-placeholder
{
	height:120px;
}


/* hide element */
.wz.cell.hidden
{
	display:none;
}


.wz.cell.option-publish i.fa-toggle-on
{
	color: #007000;
}


td.column-media-thumbnail
{
	width:200px;
}