
/*TINYMCE BUTTON*/

#menu_content_content_avia_builder_button_menu_tbl {
	background: #FAFAFA;
	border-radius: 3px;
}

.mce-tinymce .mce-ico.mce-i-avia_builder_button{
	background: transparent url(../../images/tiny-button.png) center center no-repeat;
}

/*************  AVIA BUILDER  ************/

/* @since 5.6.9    make sure that svg is visible in backend - needs to add logic for frontend !!!  */

.wp-admin .avia-modal img[src*=".svg"] {
	width: 100%;
    height: 100%;
	object-fit: cover;
}

#normal-sortables .postbox:last-child{
	margin-bottom:200px;
}

.postbox-container .postbox{
	clear:both;
}

#avia_builder{
	float:left;
	width:100%;
	display: block;
	z-index: 10;
}

#adv-settings label[for="avia_builder-hide"] {
	display: none;
}

#avia_sc_parser{
	float:left;
	width:100%;
	z-index: 10;
}

#avia_builder.avia-hidden{
	display: none !important;
}

#aviaLayoutBuilder.preloading{
	background: #fff url(../../images/loading.gif) center center no-repeat;
}

#normal-sortables .postbox#avia_builder:first-child{
	margin-top:-12px;
}

.avia_meta_box{
	margin:10px 0;
}

#poststuff .avia-builder-button{
	margin: 10px 0;
}

#poststuff .av-builder-button-disabled{
	box-shadow: none;
	background-color: #CCC;
	border-color: #AAA;
	cursor:default;
	text-shadow:none;
}

.av-builder-note{
	border-color: #D54E21;
	background-color: #D54E21;
	color:#fff;
	padding:10px;
	margin-top:10px;
	display:block;
}

.av-builder-note.avia-name-description{
	width:auto;
	margin:0;
	padding:20px;
}

#wpwrap .av-builder-note > * {
	color:#fff;
}

.av-builder-note.av-notice{
	border-color: #2EA2CC;
	background-color: #2EA2CC;
}

.av-builder-note a{
	color: #fff;
	text-decoration: underline;
}

.av-builder-note.av-only-active{
	display: none;
}

.avia-advanced-editor-enabled .av-builder-note.av-only-active{
	display: block;
}

/*	The close button is positioned rather than laid out with flex on purpose:
	av-only-active switches display between none and block, so the note cannot own a
	display value of its own. Padding keeps the text clear of the button. */
.av-builder-note-dismissable{
	position: relative;
	padding-right: 40px;
}

.av-builder-note-dismiss{
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: .7;
	line-height: 1;
}

.av-builder-note-dismiss:hover,
.av-builder-note-dismiss:focus{
	opacity: 1;
	background: rgba( 0, 0, 0, .15 );
}

#wpwrap .av-builder-note-dismiss .dashicons{
	width: 24px;
	height: 24px;
	font-size: 18px;
	line-height: 24px;
	color: inherit;
}

.av-builder-note.av-neutral a{
	color: inherit;
}

.av-builder-note.av-neutral a:hover{
	opacity: 0.7;
	transition: all 0.4s ease-in-out;
}

.av-builder-note ul{
	list-style: inside;
}

#poststuff .avia-builder-parser-section{
	width: 100%;
	display: inline-block;
	margin: 10px 0;
}

#poststuff .avia-builder-parser-section .avia-builder-parser-label{
	padding: 15px;
	width: auto;
	font-weight: bold;
	float: left;
}

#poststuff .avia-builder-parser-section .avia-builder-parser-select{
	padding: 15px;
	width: 50%;
	float: left;
}

#poststuff .avia-builder-parser-section .avia-builder-parser-info-button{
	margin: 15px 0;
}

#poststuff .avia-builder-parser-section .avia-builder-parser-message{
	width: 100%;
	float: left;
}

#poststuff .avia-builder-parser-section .avia-builder-parser-message .avia-parser-valid{
	color: #008c00;
}

#poststuff .avia-builder-parser-section .avia-builder-parser-message .avia-parser-invalid{
	color: #ea002b;
	font-weight: 600;
}

#poststuff .avia-builder-parser-section .avia-builder-parser-message .avia-parser-undefined{
	color: #0330f5;
}

.av-no-drag-drop .avia_sorthandle .avia-clone,
.av-no-drag-drop .avia_sorthandle .avia-delete,
.av-no-drag-drop .avia_sorthandle .avia-save-element,
.av-no-drag-drop .avia_sorthandle .avia-change-col-size,
.av-no-drag-drop .avia_layout_row .avia-add,
.av-no-drag-drop #avia-sort-list-dropdown{
	display: none;
}

.av-no-drag-drop .menu-item-handle{
	cursor: default;
}

.av-no-drag-drop .avia_layout_builder{
	top: 0;
	margin-top: -11px;
}

/* the hidden buttons leave the flow, so the rest of the row closes up on its own */
.av-no-drag-drop .avia-col-size{
	transform: none;
}

.avia-modal div.mce-toolbar-grp{
	min-width:100%;
}

#poststuff .avia-builder-button.avia-builder-active{
	margin-bottom: 0;
}

#postdivrich_wrap{
	position: relative;
	margin-bottom: 20px;
}

#postdivrich_wrap.avia-hidden-editor #postdivrich{
	/*display:none;				removed with 4.7.4.1 - breaks layout of WP tinyMCE and throws js errors !!! */
	visibility: hidden;
	height: 0;
}

.image_radio{
	overflow: hidden;
}

.image_radio .avia_radio_wrap{
	display:block;
	float:left;
	margin-right:4px;
}

.image_radio label{
	width:80px;
	display:block;
	text-align: center;
	color:#999;
	border:1px solid #e1e1e1;
	padding:10px;
	background: #e1e1e1;
	font-size: 11px;
}

.image_radio input{
	position: absolute;
	visibility: hidden;
}

.image_radio input:checked + label,
.image_radio .avia_radio_wrap.avia_checked label{
	background: #fff;
	color:#666;
}

.avia-form-element .avia_radio_wrap{
	display: block;
	padding: 7px;
	border: 1px solid #E1E1E1;
	margin-top: -1px;
	clear: both;
	overflow: hidden;
}

.avia-form-element .avia_radio_wrap:hover{
	background: #fff;
}

.avia-form-element .avia_radio_wrap input{
	display: block;
	float: left;
}

.avia-form-element .avia_radio_wrap label{
	margin-left: 18px;
	overflow: hidden;
	display: block;
}

.avia-form-element .avia-image-radio{
	position: relative;
	box-sizing: border-box;
	width: 47.5%;
	float: left;
	clear: none;
	padding: 0;
}

.avia-form-element .avia-image-radio:nth-child(odd) {
	border-right-width: 0;
}

.avia-form-element .avia-image-radio .radio_image{
	width: 80px;
	float: left;
	margin-right: 15px;
}

.avia-form-element .avia-image-radio label{
	margin-left: 0;
	display: table;
	box-sizing: border-box;
	width: 100%;
	padding: 7px;
}

.avia-form-element .avia-image-radio .labeltext{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}

.avia-form-element .avia-image-radio input{
	visibility: hidden;
	opacity: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
}

.avia-form-element .avia-image-radio input:checked + label{
	background-color: #E1E1E1;
	box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

.avia-fixed-controls #publish{
	float:left;
	margin-right: 4px;
}

.avia-fixed-controls #post-preview{
	float: left;
	margin-right: 4px;
	line-height: 30px;
	height: 31px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.avia-style a:focus,
.avia_meta_box a:focus{
	box-shadow:none;
}

/*template save button*/
#wpwrap a.save-template-button {
    max-width: 90%;
    white-space: normal;
    height: auto;
    min-height: 30px;
    font-size: 12px;
    padding: 3px;
    width: 100%;
}

.avia-template-save-button-container {
	position: absolute;
	right: 39px;
	bottom: -18px;
	z-index: 30;
}

#avia_builder a.open-template-button.button {
	border-radius: 0;
	border-top: none;
	border-bottom: none;
	box-shadow: none;
	border-color: #e1e1e1;
	height: 30px;
	line-height: 30px;
	position: relative;
	padding-left:33px;
	background-color: #f7f7f7;
	transition-property: border,color;
	min-height: 30px;
	color:#666;
}

#avia_builder a.av-template-added-highlight.button{
	color: #00A0D2;
	background-color: #fff;
}

#avia_builder a.open-template-button.button:hover,
#avia_builder a.open-template-button.button-primary{
	color:#00A0D2;
	background-color: #fff;
}

.avia-template-save-button-inner{
	display:block;
	position: absolute;
	width:196px;
	padding:14px 0 0 0;
	text-align: center;
	background: #fff;
	border:1px solid #e1e1e1;
	left:-79px;
	top:32px;
	box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.15);
}

.avia-arrow{
	background: #fff;
	height:10px;
	width:10px;
	position: absolute;
	top:-6px;
	left:50%;
	margin-left:-5px;
	transform: rotate(45deg);
	border-top:1px solid #e1e1e1;
	border-left:1px solid #e1e1e1;
}

.avia-template-save-button-inner .avia-arrow{
	left:auto;
	right:73px;
}

.avia-template-save-button-inner ul{
	padding:0;
	margin:0;
	border-top:1px solid #e1e1e1;
	background: #fcfcfc;
	overflow: auto;
	text-align: left;
	max-height: 250px;
}

.avia-template-save-button-inner ul li{
	margin:0;
	position: relative;
}

.avia-no-template{
	text-align: center;
}

.avia-template-save-button-inner ul li a,
.avia-no-template{
	display:block;
	padding:8px 28px 8px 14px;
	text-decoration: none;
	color:#555;
	border-top: 1px dashed #ddd;
}

.avia-template-save-button-inner ul li:first-child a,
.avia-no-template{
	border:none
}

.avia-template-save-button-inner ul li a:hover{
	background: #fff;
}

.save-template-button button{
	margin:0px 10px;
}

.avia-templates-miniheader{
	display: block;
	padding:10px 0 6px;
	color:#999;
	position: relative;
	z-index: 2;
	box-shadow:         0px 2px 3px 0px rgba(0, 0, 0, 0.15);
}

.avia-template-list-wrap{
	overflow: hidden;
}

.avia-template-save-button-container.avia-hidden-dropdown{
	z-index: 15;
}
.avia-template-save-button-container.avia-hidden-dropdown .avia-template-save-button-inner{
	display: none;
}

.avia-template-save-button-container .avia-template-list-wrap select{
	margin-top: 5px;
	min-width: 90%;
	max-width: 90%;
}

.avia-template-save-msg{
	display:block;
}

.avia-template-save-chars{
	display:block;
	color: #999;
}

.avia-template-save-error{
	color: #D54E21;
}

.avia-template-save-button-inner ul li .avia-delete-template{
	height:24px;
	width:24px;
	position: absolute;
	top:50%;
	margin-top:-12px;
	right:2px;
	
	overflow: hidden;
	text-indent: 200%;
	opacity: 0;
	z-index: 10;
	cursor: pointer;
}

.avia-template-save-button-inner ul li:hover .avia-delete-template{
	opacity: 1;
}

div .avia-template-save-button-inner ul li .avia-delete-template.preloading,
div .avia-template-save-button-inner ul li .avia-delete-template.preloading:hover{
	background: transparent url(../../images/loading_mini.gif) center center no-repeat;
	opacity: 1;
}

/*
 * Tooltips.
 *
 * Drawn in the top layer as a popover (see avia-tooltip.js), which is why there is no z-index here:
 * nothing on the page can be in front of it, and no ancestor can clip it. The reset below is against
 * the browser's own popover styling - a popover is centred in the viewport with a border and a
 * background of its own until told otherwise, and the script writes the position it should have.
 *
 * Every rule is tied to the popover attribute rather than the class alone. The frontend shortcode
 * stylesheet is loaded in here as well so element previews look right, and it styles .avia-tooltip
 * for its own, absolutely positioned tooltip - at the same weight and later in the order, so on the
 * class alone it would win and drop this one back into the page.
 */
.avia-tooltip[popover],
.avia-help-tooltip[popover],
.avia-panel-tooltip[popover]{
	position: fixed;
	inset: auto;
	width:140px;
	height: auto;
	max-width: calc(100vw - 10px);
	margin: 0;
	padding:12px;
	border: 0;
	overflow: visible;
	background: #000;
	background: rgba(0, 0, 0, 0.7);
	color:#fff;
	border-radius: 2px;
	opacity: 0;
	translate: 0 -6px;
	transition: opacity 0.2s ease, translate 0.2s ease;
}

.avia-tooltip[popover].av-tooltip-visible,
.avia-help-tooltip[popover].av-tooltip-visible,
.avia-panel-tooltip[popover].av-tooltip-visible{
	opacity: 1;
	translate: 0 0;
}

.avia-tooltip[popover] .avia-arrow,
.avia-help-tooltip[popover] .avia-arrow,
.avia-panel-tooltip[popover] .avia-arrow{
	background: rgba(0, 0, 0, 0.7);
	border:none;
}

/*
 * The script writes left, so that the arrow points at the element wherever the box had to go - and
 * the margin is cleared for the same reason the box clears its own: the frontend stylesheet nudges
 * this arrow sideways to suit its own centring, which would take the arrow back off the element.
 */
.avia-tooltip[popover] .avia-arrow-wrap,
.avia-help-tooltip[popover] .avia-arrow-wrap,
.avia-panel-tooltip[popover] .avia-arrow-wrap{
	width:20px;
	height:20px;
	position: absolute;
	bottom:-20px;
	left:0;
	margin: 0;
	overflow: hidden;
}

/*
 * The hints on the panel's own row of icons, drawn smaller than the rest.
 *
 * Those name a button in a word or two, where the others describe an element in a sentence or more -
 * so this one is sized to its text instead of being held at a fixed width, which would otherwise
 * draw a 140px box around the word "Fullscreen".
 */
.avia-panel-tooltip[popover]{
	width: auto;
	max-width: 180px;
	padding: 6px 8px;
	font-size: 11px;
	line-height: 1.4;
	white-space: nowrap;
}

/*
 * A hint is something to read, never something to point at.
 *
 * Both of these open on hover, and the arrow reaches twenty pixels past the box towards whatever the
 * hint belongs to - so without this the top of that element is covered by its own hint. Pointing at
 * it then means pointing at the hint instead, which drops the hover: on the sorting icon that closed
 * the menu the hover had just opened, over and over. The help hint is left alone - it opens on a
 * click and holds text worth selecting.
 */
.avia-tooltip[popover],
.avia-panel-tooltip[popover]{
	pointer-events: none;
}

.avia-hotkey-info{
	transition-duration: 0s;
	width:24px;
	height:24px;
	display: block;
	overflow: hidden;
	text-indent: 200%;
	white-space: nowrap;
	position: absolute;
	top: 7px;
	right: 18px;
	z-index: 25;

}

/*
 * Hands the builder the whole screen - see avia-panel-fullscreen.js.
 *
 * Shown only once it has been moved into the panel row, which settles two things at once. It is
 * written into the markup beside the sorting menu, nowhere near where it belongs, so this keeps it
 * from appearing in the corner of the builder for a moment on every page load. And it means the
 * button is simply absent in toolbar mode, where there is no row to move it into: the toolbar pins
 * the sorting menu and the help icon into the same corner with their own coordinates, 49px and 18px
 * from the edge, and the seven pixels between them are not a place to put a third control.
 */
.avia-alb-fullscreen{
	display: none;
	width: 24px;
	height: 24px;
	overflow: hidden;
	text-indent: 200%;
	white-space: nowrap;
	position: relative;
	border-radius: 3px;
}

.avia-alb-fullscreen.avia-in-panel-row{
	display: block;
}

/*
 * Switched on, it is filled with whatever colour the admin is wearing - the same token the admin
 * colour scheme gives its primary buttons, so it matches the Save button of the screen it sits on
 * rather than a blue of our own.
 */
.avia-alb-fullscreen.avia-alb-fullscreen-active{
	background: var( --wp-admin-theme-color, #2271b1 );
	--av-ui-icon: #fff;
}

.avia-alb-fullscreen.avia-alb-fullscreen-active:hover::before,
.avia-alb-fullscreen.avia-alb-fullscreen-active:focus-visible::before{
	background-color: #fff;
}

/*
 * While the builder is expanded, the sorting dropdown and the hotkey info are moved into this row
 * next to the publish/preview/close buttons (see avia-element-behavior.js). Laying the row out with
 * flex means nothing in it needs coordinates of its own: it stays correct in both editors, in every
 * scroll state, and whether the editor renders three buttons next to it or none.
 */
.avia-fixed-controls .avia-alb-panel-row{
	display: flex;
	align-items: center;
	gap: 6px;
}

/*
 * The extra class is carried by the elements themselves (added when they are moved into the row) so
 * these win outright. Both are pinned into a corner with their own coordinates by the base and the
 * block editor stylesheet, and those have to be neutralised here or they leave the row and reappear
 * somewhere in the middle of the panel the moment anything makes them positioned again.
 */
.avia-fixed-controls .avia-alb-panel-row > #avia-sort-list-dropdown.avia-in-panel-row,
.avia-fixed-controls .avia-alb-panel-row > .avia-alb-fullscreen.avia-in-panel-row,
.avia-fixed-controls .avia-alb-panel-row > .avia-hotkey-info.avia-in-panel-row{
	/*
	 * relative, not static: these draw their icon with an inset ::before, which would otherwise take
	 * the whole panel as its containing block and paint the glyph centred in the middle of it.
	 */
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	bottom: auto;
	flex: 0 0 auto;
	
}
.avia-fixed-controls.avia-alb-panel-side .avia-alb-panel-row > #avia-sort-list-dropdown.avia-in-panel-row{
	max-width: 150px;
}


.avia-help-tooltip[popover] {
	width: 390px;
	background: #fff;
	color:#777;
	border:1px solid #e1e1e1;
	box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.2);
}

/*	opens below the element it belongs to, so its arrow points up out of the top edge */
.avia-help-tooltip[popover] .avia-arrow-wrap{
	bottom:auto;
	top:-20px;
}

.avia-help-tooltip[popover] .avia-arrow{
	top: 15px;
	background: #fff;
	border:1px solid #e1e1e1;
}

.inner_tooltip h4{
	font-size: 1.5em;
	margin-bottom: 15px;
	padding: 0 0 3px;
	clear: left;
	margin-top:0;
	font-weight: normal;
}

.inner_tooltip ul{
	list-style-type: disc;
	margin: 7px 0 15px 2em;
}

.inner_tooltip li{
	font-weight: normal;
}

/*shortcode wrap*/
.shortcode_button_wrap{
	display: block;
	position: relative;
}

.shortcode_insert_button{
	height:50px;
	width:70px;
	border:1px solid #e1e1e1;
	padding: 4px 2px 10px 2px;
	background: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	display: block;
	overflow: hidden;
	outline: none;
	line-height:13px;
	float:left;
	margin:0px 3px 3px 0;
	position: relative;
	color:#777;
}

.shortcode_insert_button span {
	position: absolute;
	width: 88%;
	left: 6%;
	bottom: 6px;
	background: rgba(255,255,255,0.7);
	padding-top: 1px;
}

.shortcode_insert_button.av-shortcode-disabled{
	opacity: 0.5;
	cursor: help;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.post-type-alb_custom_layout .shortcode_insert_button.av-shortcode-disabled{
	display: none;
}

#wpwrap .avia-active-insert{
	border:1px solid #D54E21;
}

.shortcode_insert_button:hover{
	border:1px solid #aaa;
}

.shortcode_insert_button:active{
	outline: none;
	border:1px solid #D54E21;
}

.shortcode_insert_button:hover img,
.shortcode_insert_button:active img{
	opacity: 1;
}

.shortcode_insert_button img{
	display: block;
	margin:6px auto 5px auto;
	position: relative;
	opacity: 0.5;
}

/*
 * Element icons - inlined svg rather than a linked bitmap, so the glyph takes its
 * colour from here instead of carrying it in the file. 20px keeps the picker and the
 * canvas laid out exactly as the 20x20 pngs did.
 *
 * The img rules above still apply to icons registered by plugins, which stay <img>.
 *
 * @since 8.0
 */
.avia-element-icon{
	width: var( --av-element-icon-size );
	height: var( --av-element-icon-size );
	color: var( --av-ui-icon );
	flex: 0 0 auto;
	transition: color .15s ease;
}

.shortcode_insert_button svg.avia-element-icon{
	display: block;
	margin: 6px auto 5px auto;
	position: relative;
}

.shortcode_insert_button:hover svg.avia-element-icon,
.shortcode_insert_button:active svg.avia-element-icon{
	color: var( --av-ui-icon-hover );
}

/*
 * Icon and name as one row - see the avia-element-head wrapper in class-shortcode-template.php.
 *
 * These used to be two inline-blocks with the icon pushed down 6px to look centred, which only held
 * while the name stayed on one line: a name that wrapped, or the description some elements add after
 * it, left the icon sitting against the first line instead of the block. Aligning them properly is
 * what the wrapper is for, and it lets the icon grow without the offset needing to be re-guessed.
 */
.avia_inner_shortcode .avia-element-head{
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.avia_inner_shortcode .avia-element-head .avia-element-label{
	margin: 0;
	min-width: 0;
	color:#111;
	font-weight: 700;
}

.avia_inner_shortcode .avia-element-head + div,
.avia_inner_shortcode .avia-element-head + pre{
	margin-top:15px;
}

/*
 * The box around an element that draws its own preview.
 *
 * Elements without a preview are drawn inside a container of their own, which is what makes the icon
 * and name read as belonging to the thing below them. Those with a preview - a text block, a heading,
 * an image - replace that container to make room for it, so their name sat above a separate box with
 * nothing holding the two together. This gives them the same box, with the preview inside it.
 */
.avia_sortable_element.avia-has-head > .avia_inner_shortcode{
	background: #fcfcfc;
	padding: 10px;
	border: 1px solid #e1e1e1;
	border-radius: 3px;
}

.avia_inner_shortcode .avia-element-head .avia-element-icon{
	height: 20px;
	width: 20px;
	color:#111;
}

/*
 * A plugin may still register an svg through the <img> fallback, and the catch-all
 * rule near the top of this file would blow it up to 1500px. Element icons are a
 * known size, so pin them.
 */
#avia_builder img.avia-element-icon[src*=".svg"]{
	width: var( --av-element-icon-size );
	height: var( --av-element-icon-size );
}

.avia_layout_builder {
	min-height: 200px;
	background: white;
	padding: 40px 11px;
	border: 1px solid #E1E1E1;
	float:left;
	position: relative;
	width: 100%;
	left: -12px;
	top: 9px;
}

/*controll bar*/
.layout-builder-wrap{
	position: relative;
	float: left;
	width: 100%;
}

.avia-controll-bar{
	height: 30px;
	line-height: 30px;
	width: 100%;
	position: absolute;
	top: -11px;
	left: -12px;
	z-index: 8;
	color: #333;
	display: block;
	border: 1px solid #E1E1E1;
	background: #E1E1E1;
	padding: 0 11px;
	background: #e1e1e1;
	background-image: linear-gradient(to top,#ECECEC,#F9F9F9);
}

.avia-controll-bar:hover{
	z-index: 12;
}

.avia-undo-button,
.avia-redo-button{
	transition: none;
	height:24px;
	width:24px;
	margin:3px 0;
	display: block;
	float:left;
	overflow: hidden;
	text-indent: 200%;
	white-space: nowrap;
	
}
.avia-undo-button{
	margin-left:0;
	
}

.avia-redo-button.avia-inactive-step,
.avia-undo-button.avia-inactive-step,
.avia-redo-button.avia-inactive-step:active,
.avia-undo-button.avia-inactive-step:active{
	opacity: 0.5;
}

.avia-undo-button:active,
.avia-redo-button:active{
	outline: none;
	opacity: 0.8;
}

/*shortcode layout*/
.avia_layout_column,
.avia_layout_section,
.avia-highlight{
	width:200px;
	margin:1%;
	float:left;
	position: relative;
	border-radius: 4px;
}

.avia_pop_class{
	/* animation: avia_pop 0.3s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); */
}

@keyframes avia_pop {
  0%   { transform:scale(0.8);  }
  100% { transform:scale(1);   }
}

.avia-first-col{
	clear:left;
}

.avia-start-sorting .avia-first-col{
	clear:none;
}

.avia_inner_shortcode{
	position: relative;
	z-index: 10;
}

.avia_layout_column > .avia_inner_shortcode {
	min-height: 80px;
	border: 1px dashed #E1E1E1;
	padding: 15px 10px 20px 10px;
	top: 0px;
	border-top-color: transparent;
}

.avia_layout_column > .avia_inner_shortcode:after,
.avia_layout_section > .avia_inner_shortcode:after,
#avia_builder:after,
.avia_clearfix:after{
	content: '.';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	clear:both;
}

div .avia_sorthandle{
	--av-handle-btn-size: 28px;

    height: calc(var(--av-handle-btn-size) + 1px);
    width: auto;
    position: relative;
    z-index: 10;
    opacity: 1;
    display: flex;
    align-items: center;
    padding-inline-start: 1px;
    border-radius: 3px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border: 1px solid #e1e1e1;
    box-shadow: none;
}

/*
 * The buttons flow in a single row - order decides where they sit, so no button
 * needs to know the width of the ones before it. Hidden buttons (.av-no-drag-drop)
 * drop out of the flow on their own and the rest closes the gap.
 */
.avia_sorthandle > a,
.avia_sorthandle > .avia-col-size{
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	float: none;
	flex: 0 1 var( --av-handle-btn-size );
	width: var( --av-handle-btn-size );
	min-width: 16px;
	height: var( --av-handle-btn-size );
	line-height: var( --av-handle-btn-size );
}

/* .avia-element-bg-color is a backdrop, not a button - it keeps its own placement */
.avia_sorthandle > .avia-element-bg-color{
	flex: none;
	order: 0;
}

.avia_sorthandle > .avia-change-col-size{ order: 30; }
.avia_sorthandle > .avia-change-col-size.avia-smaller{ order: 10; }
.avia_sorthandle > .avia-col-size{ order: 20; }
.avia_sorthandle > .avia-save-element{ order: 40; }
.avia_sorthandle > .avia-new-target{ order: 45; }
.avia_sorthandle > .avia-clone{ order: 50; }
.avia_sorthandle > .avia-edit-element{ order: 60; }
.avia_sorthandle > .avia-toggle-visibility{ order: 80; }
.avia_sorthandle > .custom-elements-lock{ order: 85; }
.avia_sorthandle > .avia-delete{ order: 90; }

/* the lock used to float right - the row places it now */
.avia_sorthandle > .custom-elements-lock.avia-svg-icon svg:first-child{
	float: none;
	padding: 0;
}

/* spacer that pushes the visibility toggle and the delete button to the far end */
div .avia_sorthandle::after{
	content: '';
	flex: 1 1 auto;
	order: 70;
}

.avia-col-size{
	transition: all 0.2s ease-in-out;
}

.avia_sorthandle a,
.avia_sortable_element .avia_sorthandle,
.avia-element-title,
.avia_sorthandle a.avia-element-bg-color{
	transition: opacity 0.2s ease-in-out;
}

.avia_layout_column:hover a,
.avia_layout_section:hover >.avia_sorthandle > a,
.avia_sortable_element:hover a{
	opacity: 1;
}

.avia_layout_column a:active{
	outline: none;
	opacity: 0.3;
}

.avia-delete{
	height:24px;
	width:24px;
	position: absolute;
	top:0px;
	right:0px;
	
	overflow: hidden;
	text-indent: 200%;
	opacity: 0;
}

.avia-new-target{
	height:24px;
	width:24px;
	position: absolute;
	top:0px;
	left:0px;
	
	overflow: hidden;
	text-indent: 200%;
	opacity: 0;
}

.avia-save-element{
	height:24px;
	width:24px;
	position: absolute;
	top:0px;
	left:1px;
	
	overflow: hidden;
	text-indent: 200%;
	opacity: 0;
}

.avia_layout_column:hover>.avia_sorthandle .avia-save-element{
	opacity: 0.8;
}

.avia_sorthandle .avia-edit-element{
	overflow: hidden;
	text-indent: 200%;
	opacity: 0;
}

.avia-edit-element{
	cursor: pointer;
}

.avia_sorthandle .avia-clone{
	overflow: hidden;
	text-indent: 200%;
	opacity: 0;
	border:none;
}

.avia-change-col-size{
	height:24px;
	width:24px;
	line-height: 24px;
	display: block;
	overflow: hidden;
	text-indent: 200%;
	opacity: 0;
}

.avia-col-size{
	height:24px;
	width:24px;
	line-height: 24px;
	text-align: center;
	color:#999;
	font-size:12px;

	/* the resize arrows next to it are invisible until hover - slide over them until then */
	transform: translateX( -20px );
}

.avia_layout_cell > .avia_sorthandle > .avia-col-size{
	flex-basis: 42px;
	width:42px;
}

.avia_layout_column:hover .avia-col-size{
	transform: none;
	color:#333;
}

.avia_layout_builder .avia-highlight{
	border:1px dashed #999;
	background: #fcfcfc;
	max-width: 100%;
	box-sizing: border-box;
}

.avia_layout_builder .av_one_fifth{
	width:18%;
}

.avia_layout_builder .av_two_fifth{
	width:38%;
}

.avia_layout_builder .av_three_fifth{
	width:58%;
}

.avia_layout_builder .av_four_fifth{
	width:78%;
}

.avia_layout_builder .av_one_fourth{
	width:23%;
}

.avia_layout_builder .av_three_fourth{
	width:73%;
}

.avia_layout_builder .av_one_third{
	width:31.3%;
}

.avia_layout_builder .av_two_third{
	width:64.6%;
}

.avia_layout_builder .av_one_half{
	width:48%;
}

.avia_layout_builder .av_one_full{
	width:98%;
}

/*hidden*/
.avia-element-hidden{
	display:none;
}

/*generic*/
.avia-pre-style{
	white-space: pre-line;
}

/*modal group element layout*/
.avia-modal-group{
	border:1px solid #e1e1e1;
	background: #f8f8f8;
	min-height:40px;
	position: relative;
	overflow: hidden;
	width:95%;
	box-sizing: border-box;
}

.avia-element-fullwidth .avia-modal-group{
	width:100%;
}

.avia-modal-group-element {
	background: white;
	border-bottom: 1px dashed #E1E1E1;
	position: relative;
	line-height: 18px;
}

.avia-modal-group-element-inner{
	position: relative;
	min-height: 42px;
}

.avia-modal-group-element-inner>div{
	padding: 12px 32px 12px;
}

.avia-modal-group-element:hover,
.avia-modal-group-element.av-highlight-subel{
	background: #f8f8f8;
	cursor: pointer;
}

.avia-modal-group-element:last-child{
	border:none;
}

.avia-modal-group-element textarea{
	display:none;
}

.avia-modal-group-element .avia-move-handle{
	transition-duration: 0s;
	cursor: move;
	position: absolute;
	height:24px;
	width:24px;
	text-indent: 200%;
	top:50%;
	left:0px;
	margin-top:-12px;
	overflow: hidden;
	display: block;
	
	z-index: 10;
}

.avia-modal-group-element .avia-move-handle:hover,
.avia-modal-group-element .avia-move-handle:active{
	
	outline: none;
}

.avia-modal-group-element-highlight{
	background: #ddd;
}

.avia-modal-group-element .avia-delete{
	transition-duration: 0s;
	opacity: 1;
	top:50%;
	right:4px;
	left:auto;
	margin-top:-12px;
	z-index: 10;
}

.avia-add,
.avia-clone{
	cursor: pointer;
	position: relative;
	height: 24px;
	line-height: 24px;
	width: 24px;
	text-indent: 200%;
	overflow: hidden;
	display: block;
	border: 1px solid #E1E1E1;
	border-top: none;
	z-index: 10;
	transition-duration: 0s;
}

.avia-add + .avia-clone{
	margin-left:-1px;
}

.avia-add:hover, .avia-add:active{
	outline: none;
}

.avia-clone{
}

.avia-clone:hover,
.avia-clone:active{
	outline: none;
}

div .avia_inner_shortcode img {
	max-width: 100%;
	display: inline-block;
	margin-right: 10px;
	top: 6px;
	position: relative;
}

div .avia_inner_shortcode .avia_image_container img{
	background-color: #f8f8f8;
	background-image: linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}

.avia-add.avia-custom-label,
.avia-clone.avia-custom-label {
	float: left;
	width: auto;
	text-indent: 0;
	padding-left: 25px;
	padding-right: 9px;
	line-height: 25px;
	color: #AAA;
	font-size: 11px;
}

/*
 * Once it carries a label the button is no longer a 24px square, it is as wide as its text with the
 * glyph in the gutter the padding above reserves. The layer that draws the glyph is pinned to all
 * four edges and centres it, so left to itself it centres over the whole button and the icon lands
 * on top of the words. Confining it to that gutter is what puts the glyph back beside the label.
 */
.avia-add.avia-custom-label::before,
.avia-clone.avia-custom-label::before{
	right: auto;
	width: 25px;
}

.av-hide-delete .avia-modal-group-wrapper .avia-attach-modal-element-delete,
.av-hide-add .avia-modal-group-wrapper .avia-attach-modal-element-add,
.av-hide-clone .avia-modal-group-wrapper .avia-attach-modal-element-clone{
	display: none;
}

/*element were group items are not managed manually*/
.av-automated-inserts .avia-modal-group:empty{
	background: transparent;
	border:none;
}

.av-automated-inserts .avia-modal-group-element .avia-delete{
	display:none;
}

/*elements with hidden bg, like images or buttons*/
div .avia_sortable_element .avia_hidden_bg_box img{
	max-width:100%;
	height:auto;
}

div .avia_sortable_element .avia_hidden_bg_box{
	border: 1px solid transparent;
	background: transparent;
	transition: all 0.2s ease-in-out;
}

div .avia_sortable_element:hover .avia_hidden_bg_box {
	border: 1px solid #E1E1E1;
	background: #F8F8F8;
}

div .avia_layout_column .avia_sortable_element .avia_hidden_bg_box{
	background: transparent;
	border: 1px solid transparent;
}

div .avia_layout_column .avia_sortable_element:hover .avia_hidden_bg_box {
	border: 1px solid #E1E1E1;
	background: #fff;
}

/*interface tabs that hold shortcode buttons*/
.avia-tab-title-container a{
	padding:10px;
	display:block;
	float:left;
	margin-right:3px;
	position: relative;
	top:1px; z-index: 2;
	text-decoration: none;
}

.avia-tab-title-container a.active-tab{
	background: #fcfcfc;
	border:1px solid #e1e1e1;
	padding:9px 9px 10px 9px;
	border-bottom:none;
}

.avia-tab{
	display:none;
	border:1px solid #e1e1e1;
	padding:10px;
	background: #fcfcfc;
	clear: both;
	position: relative;
	overflow: hidden;
}

.avia-tab-1{
	display:block;
}

.avia-tab-title-container a:last-child{
	margin:0;
}

/* shortcodes */
.avia_sortable_element{
	width: 98%;
	margin: 1%;
	float: left;
	position: relative;
	color: #666;
}

/*
 * The icon font's glyphs - the lock on a locked element and its kin - drawn at the size of the text
 * around them. Element icons are excluded: they are artwork with a size of their own, and this rule
 * outranks it, so without the exclusion they collapse to one em and take a hardcoded grey with them.
 */
.avia_sortable_element svg:first-child:not(.avia-element-icon){

}

.avia_sortable_element img[is-svg-img="true"]{
	height: 1em;
	width: 1em;
}

.avia_sortable_element svg:first-child[is-colored="true"]{
	fill: unset;
	stroke: unset;
}

.avia_inner_shortcode .avia_sortable_element,
.avia_inner_shortcode .avia-highlight{
	margin: 10px 1%;
}

.avia_inner_shortcode textarea{
	display:none;
}

.testmode .avia_inner_shortcode textarea{
	width:50%;
	margin:20px auto;
	display:block;
}

#_aviaLayoutBuilderCleanData{
	width:100%;
	height:300px;
	margin:20px 0;
	display:none;
}

.testmode #_aviaLayoutBuilderCleanData,
.avia_mode_debug #_aviaLayoutBuilderCleanData{
	display:inline-block;
}

.avia_sortable_element .avia_sorthandle{
opacity: 0;
    position: absolute;
    top: calc( ( var(--av-handle-btn-size) + 7px )* -1);
    right: 0px;
    left: 0px;
    background: #111111d1;
    border: none;
    box-shadow: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 4px;
    color: #fff;
    backdrop-filter: blur(2px);
}

.avia_sortable_element .avia_sorthandle a::before{
	background-color:#ffffffa8;
}

.avia_sortable_element .avia_sorthandle a:hover::before{
	background-color:#fff;
}

.avia_sortable_element:hover .avia_sorthandle{
	opacity:1;
	z-index: 12;
}

.avia_sortable_element:hover, .avia_layout_column:hover{
	z-index: 20;
}

/*hr*/
.avia_sortable_element.av_hr .avia-divider{
	margin:10px 0;
	border-top:3px solid #ddd;
	display: block;
	position: relative;
	top:-3px;
}


/*textblock*/
.avia_sortable_element .avia_textblock{
	padding:7px 10px;
	background: #f8f8f8;
	border: 1px dashed #e1e1e1;
}

.avia_sortable_element:hover .avia_textblock{
	border: 1px solid #e1e1e1;
	cursor: pointer;
}

.avia_sortable_element:hover .avia_inner_shortcode{
	background: #fff;
}

.avia_layout_column .avia_sortable_element .avia_textblock{
	background: #fff;
}

.avia_textblock_style {
	overflow: hidden;
}

.avia_textblock_style blockquote{
	border-left:5px solid #e1e1e1;
	margin: 1em 0;
	padding:0 1em;
	color:#999;
}

.avia_textblock_style ul{
	list-style-type:disc;
	margin-left: 2em;
}

.avia_textblock_style ol{
	list-style-type:decimal;
	margin-left: 2em;
}

.avia_textblock_style img{
	max-width:100%;
	height:auto;
}

#wpwrap .avia_textblock_style h1,
#wpwrap .avia_textblock_style h2,
#wpwrap .avia_textblock_style h3,
#wpwrap .avia_textblock_style h4,
#wpwrap .avia_textblock_style h5,
#wpwrap .avia_textblock_style h6{
	cursor: default;
	background: none;
	font-weight: bold;
	padding: 0;
	margin: 5px 0 1em;
	border: none;
	line-height: 1em;
	box-shadow: none;
}

#wpwrap .avia_textblock_style h1{
	font-size: 23px;
}

#wpwrap .avia_textblock_style h2{
	font-size: 21px;
}

#wpwrap .avia_textblock_style h3{
	font-size: 19px;
}

#wpwrap .avia_textblock_style h4
{
	font-size: 17px;
}

#wpwrap .avia_textblock_style h5
{
	font-size: 15px;
}

#wpwrap .avia_textblock_style h6{
	font-size: 13px;
}

#wpwrap .avia_textblock_style p{
	font-size: 13px;
}

div .avia-element-tiny_mce iframe{
	background: #fff;
}

/*heading*/
.avia_sortable_element .avia-special-heading{
	font-size: 25px;
	padding: 25px 20px;
	line-height: 1.4em;
	border-color: transparent;
	background-color: transparent;
	font-weight: 300;
}

.avia-special-heading .avia-style-blockquote.modern-quote.modern-centered,
.avia-special-heading .avia-style-blockquote_modern-quote_modern-centered,
.avia-special-heading .avia-style-blockquote.elegant-quote.elegant-centered,
.avia-special-heading .avia-style-blockquote_elegant-quote_elegant-centered{
	text-align: center;
}

.avia-special-heading .avia-style-blockquote.modern-quote.modern-right,
.avia-special-heading .avia-style-blockquote_modern-quote_modern-right{
	text-align: right;
}

.avia-special-heading .avia-style-blockquote_classic-quote,
.avia-special-heading  .avia-style-blockquote.classic-quote,
.avia-special-heading .avia-style-blockquote_classic-quote_classic-quote-left,
.avia-special-heading  .avia-style-blockquote.classic-quote.classic-quote-left,
.avia-special-heading .avia-style-blockquote_classic-quote_classic-quote-right,
.avia-special-heading  .avia-style-blockquote.classic-quote.classic-quote-right{
	text-align: center;
	font-family: "Georgia", serif;
	font-style: italic;
}

.avia-special-heading .avia-style-blockquote_classic-quote_classic-quote-left,
.avia-special-heading .avia-style-blockquote.classic-quote.classic-quote-left{
	text-align: left;
}

.avia-special-heading .avia-style-blockquote_classic-quote_classic-quote-right,
.avia-special-heading .avia-style-blockquote.classic-quote.classic-quote-right{
	text-align: right;
}

.avia-special-heading .avia-heading-icon{
	display: none;
}

.avia-special-heading .avia-style-blockquote_elegant-quote_elegant-centered.avia-show_icon-custom_icon .avia-heading-icon,
.avia-special-heading .avia-style-blockquote.elegant-centered.avia-show_icon-custom_icon .avia-heading-icon{
	display: block;
}

.avia_sortable_element .avia-special-heading .av-subheading{
	font-size: 15px;
	line-height: 1.4em;
	text-transform: none;
	padding:10px 0;
	display: none;
}

.avia_sortable_element .avia-special-heading .subheading_active-subheading_above .av-subheading-top,
.avia_sortable_element .avia-special-heading .avia-subheading_active-subheading_above .av-subheading-top{
	display:block
}

.avia_sortable_element .avia-special-heading .subheading_active-subheading_below .av-subheading-bottom,
.avia_sortable_element .avia-special-heading .avia-subheading_active-subheading_below .av-subheading-bottom{
	display:block
}

.avia_sortable_element .avia-special-heading p{
	margin:0;
}

#aviaLayoutBuilder .avia-style- .av-subheading{
	display:none;
}

/*sections*/
.avia_layout_section{
	clear:both;
	width:98%;
}

.avia_layout_section>.avia_inner_shortcode{
	border:1px solid #e1e1e1;
	border-top:none !important;
	min-height: 100px;
	padding:6px;
	position: relative;
	z-index: 20;
}

/* sits on top of the button row - the two cross fade on hover */
.avia-element-title{
	position: absolute;
	inset-inline-start: 10px;
	top: 0;
	height: 27px;
	line-height: 26px;
	color: #999;
	opacity: 1;
}

.avia_layout_section:hover .avia-element-title{
	opacity: 0;
}

/*LAYOUT ROW + CELL*/
.avia_layout_row{
	margin-bottom:30px;
}

.avia-cell-layout-buttons{
	display: block;
}

.avia-add-cell,
.avia-set-cell-size {
	position: relative;
	float: right;
	z-index: 20;
	border-top: 1px solid #E1E1E1;
	width: auto;
	text-indent: 0;
	color: #A5A5A5;
	text-decoration: none;
	padding: 0 7px 0 27px;
}

/*
 * Both of these are as wide as their words with the glyph in the gutter the padding above reserves,
 * and the layer that draws the glyph is pinned to all four edges - so left alone it centres the icon
 * over the middle of the button, on top of the label. Confining it to that gutter puts it back.
 */
.avia-add-cell::before,
.avia-set-cell-size::before{
	right: auto;
	width: 27px;
}

.avia_layout_row.ui-draggable-dragging .avia-add{
	display: none;
}

.avia-set-cell-size{
	/*right:83px;*/
	background-color: #FFF;
}

.avia-set-cell-size:hover,
.avia-set-cell-size:active {
	background-color: #FFF;
}

div .avia_layout_row > .avia_inner_shortcode{
	padding:0;
	overflow: hidden;
	clear: both;
}

.avia_layout_row .avia_layout_cell{
	margin:0;
}

.avia_layout_row .avia_layout_cell > .avia_inner_shortcode{
	border:none;
	border-right: 1px solid #e1e1e1;
}

.avia_layout_row .avia_layout_cell > .avia_sorthandle{
	background: #fff;
	border:none;
	box-shadow: none;
	border-bottom: 1px dashed #e1e1e1;
	border-right: 1px solid #e1e1e1;
}

.av-fake-cellborder{
	border-right: 1px solid #E1E1E1;
	display: block;
	height: 2000px;
	position: absolute;
	right: -1px;
	-webkit-backface-visibility: hidden;
}

.av_layout_row .avia_layout_cell:last-child .av-fake-cellborder{
	display:none;
}

.av_layout_row .avia_layout_cell:last-child > .avia_sorthandle,
.av_layout_row .avia_layout_cell:last-child > .avia_inner_shortcode{
	border-right:none;
}

.avia_layout_row .avia_layout_column > .avia_inner_shortcode{
	top:0;
}

.avia_layout_builder .av_cell_one_full,
.av-modal-label-av_cell_one_full{
	width:100%
}

.avia_layout_builder .av_cell_four_fifth,
.av-modal-label-av_cell_four_fifth{
	width:80%
}

.avia_layout_builder .av_cell_three_fourth,
.av-modal-label-av_cell_three_fourth{
	width:75%
}

.avia_layout_builder .av_cell_two_third,
.av-modal-label-av_cell_two_third{
	width:66.6%
}

.avia_layout_builder .av_cell_three_fifth,
.av-modal-label-av_cell_three_fifth{
	width:60%
}

.avia_layout_builder .av_cell_one_half,
.av-modal-label-av_cell_one_half{
	width:50%
}

.avia_layout_builder .av_cell_two_fifth,
.av-modal-label-av_cell_two_fifth{
	width:40%
}

.avia_layout_builder .av_cell_one_third,
.av-modal-label-av_cell_one_third{
	width:33.3%
}

.avia_layout_builder .av_cell_one_fourth,
.av-modal-label-av_cell_one_fourth{
	width:25%
}

.avia_layout_builder .av_cell_one_fifth,
.av-modal-label-av_cell_one_fifth{
	width:20%
}

.avia-layout-row-modal{
	margin-bottom:10px;
	color: #888;
}

.avia-layout-row-modal-label span{
	display:inline-block;
	border-right:1px solid #e1e1e1;
}

.avia-layout-row-modal-label span span{
	border:1px solid #e1e1e1;
	text-align: center;
	padding:15px;
	box-sizing: border-box;
	border-right:none;
}

.av-layout-row-inner-label{
	width:100%;
}

.av-layout-row-inner-label:hover{
	background: #f8f8f8;
}

.avia-layout-row-modal-label input{
	display: none;
}

.avia-layout-row-modal-label input:checked + .av-layout-row-inner-label{
	background: #1E8CBE;
	color:#fff;
}

/* a cell has no resize arrows, so its size label needs no room made for them */
.avia_layout_cell > .avia_sorthandle > .avia-col-size,
.avia_layout_row .avia_layout_cell:hover > .avia_sorthandle >  .avia-col-size{
	transform: none;
	margin-inline-start: 5px;
	line-height: 24px;
}

/*sidebar*/
.avia_inner_shortcode .avia-element-label{
	margin-bottom: 5px;
	display: inline-block;
}

.avia_sortable_element.av_sidebar .avia_inner_shortcode{
	background: #fcfcfc;
	padding:10px;
	border:1px solid #e1e1e1;
}

.avia_sortable_element.av_sidebar .avia_inner_shortcode select{
	max-width:90%;
	width:auto;
}

.avia-form-element.avia-layerslider-select select{
	padding-right: 26px;
}

.avia_inner_shortcode .avia-form-element-container,
.avia_inner_shortcode .avia-form-element-container:hover{
	border-bottom:none;
	padding: 0;
	background: transparent;
}

/*team*/
.avia_job_container_inner{
	font-style: italic;
	color:#aaa;
}

/*icon element*/
.avia_icon_element .avia_icon_char{
	display: inline-block;
	width: 2em;
	line-height: 2em;
	font-size: 22px;
	border-radius: 100px;
	text-align: center;
}

.avia_icon_char svg:first-child,
.avia_icon_char img[is-svg-img="true"]{
	height: 1em;
	width: 1em;
}

.avia_icon_element .avia_icon_char svg:first-child{
	stroke: #666;
	fill: #666;
	vertical-align: text-bottom;
}

.avia_icon_element .avia_icon_char svg:first-child[is-colored="true"]{
	fill: unset;
	stroke: unset;
}

.avia-font-svg_entypo-fontello .avia_icon_char svg:first-child{
	stroke: unset !important;
}

.avia_icon_element .avia-style-border .avia_icon_char{
	border: 2px solid #e1e1e1;
}

.avia_icon_element .avia-position-right{
	text-align: right;
}

.avia_icon_element .avia-position-center{
	text-align: center;
}

.avia_icon_element .av_icon_caption{
	display: none;
}

.avia_icon_element .avia-style-border .av_icon_caption{
	display: block;
}

/*iconbox element*/
.avia_iconbox{
	position: relative;
}

.avia_iconbox_icon {
	display: block;
	width: 2em;
	line-height: 2em;
	font-size: 22px;
	color: #fff;
	background: #21759B;
	border-radius: 100px;
	text-align: center;
	float: left;
	margin-right: 10px;
}

.avia_iconbox_icon svg:first-child{
	fill: #fff;
	stroke: #fff;
}

.avia_iconbox_icon svg:first-child[is-colored="true"]{
	fill: unset;
	stroke: unset;
}

.avia_iconbox .avia_iconbox_content_wrap{
	overflow: hidden;
}

.avia_iconbox .avia_iconbox_content_wrap p{
	margin: 1em 0  0 0;
}

.avia_iconbox .avia-position-top{
	padding-top:50px;
}

.avia_iconbox .avia-position-top .avia_iconbox_icon{
	position: absolute;
	left:50%;
	margin-left: -1em;
	top: 10px;
}

.avia_iconbox .avia_iconbox_title{
	margin: 2px 0 -8px 0;
	font-size: 20px;
	font-weight: normal;
	position: relative;
	line-height: 1.1em;
}

.avia_iconbox .avia-position-top{
	text-align: center;
}

.avia_iconbox .avia_iconbox_content_wrap li{
	text-align: left;
}

/*numbers element*/
span.avia_big_numbers_icon {
	font-size: 30px;
	line-height: 30px;
	display:none;
}

span.avia_big_numbers_icon svg:first-child{
	fill: #1d2327;			/* h2  common.css   */
	stroke: #1d2327;
	margin-bottom: -5px;
}

span.avia_big_numbers_icon svg:first-child[is-colored="true"]{
	fill: unset;
	stroke: unset;
}

.avia-icon_select-no span.avia_big_numbers_icon{
	display:none;
}

.avia-icon_select-av-icon-before .avia_big_numbers_icon_before .avia_big_numbers_icon{
	display:inline;
}

.avia-icon_select-av-icon-after .avia_big_numbers_icon_after  .avia_big_numbers_icon{
	display:inline;
}

/*portfolio element, gallery element, contact element, table element*/
.avia_default_container.avia_sortable_element .avia_inner_shortcode{
	background: #fcfcfc;
	padding:10px;
	border:1px solid #e1e1e1;
	border-radius: 3px;
}

/*image element*/
.avia_image .avia-align-right{
	text-align: right;
}

.avia_image .avia-align-left{
	text-align: left;
}

.avia_image .avia-align-center{
	text-align: center;
}

.avia_image .avia_image_dynamic_overlay{
	position: absolute;
	width: 100%;
	top: 50%;
	color: #EE0000;
}

.avia-image-diff-container .avia_image_dynamic_overlay{
	position: absolute;
	width: auto;
	z-index: 1000;
	top: 75%;
	color: #EE0000;
}

.avia_image .tmpl-hide-on-empty,
.avia-image-diff-container .tmpl-hide-on-empty{
	background-color: white;
}

.avia_hotspot_image .avia_image_dynamic_overlay{
	text-align: center;
	z-index: 5000;
	top: 25%;
}

/*	before/after image - image diff		*/
.avia-image-diff-container > div{
	display: flex;
	position: relative;
	max-width: 100%;
	justify-content: flex-start;
	margin: 5px;
	box-sizing: content-box;
	overflow: hidden;
}

.avia-image-diff-container .avia_image_container img{
	margin: 0;
}

.avia-image-diff-container .avia-align-left{
	justify-content: flex-start;
	margin-right: 15px;
}

.avia-image-diff-container .avia-align-center{
	justify-content: center;
}

.avia-image-diff-container .avia-align-right{
	justify-content: flex-end;
	margin-left: 15px;
}

.avia-image-diff-container .av-image-diff-wrapper{
	position: relative;
}

.avia-image-diff-container .av-image-diff-overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	opacity: 1;
}

.avia-image-diff-container .av-image-diff-overlay .av-img-diff-label{
	padding: 5px 10px;
	border: 1px solid #000;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(51,51,51,.5);
	background-color: #fff;
	z-index: 30;
}

.avia-image-diff-container .av-image-diff-overlay .av-img-diff-label:hover,
.avia-image-diff-container.btn-on-hover .av-image-diff-wrapper .av-img-diff-label:hover{
	opacity: 0.5;
	cursor: pointer;
}

.avia-image-diff-container .avia-btn_style-btn-style-square .av-image-diff-overlay .av-img-diff-label{
	border-radius: 0;
}

.avia-image-diff-container .avia-btn_style-btn-style-oval .av-image-diff-overlay .av-img-diff-label{
	border-radius: 50%;
}

.avia-image-diff-container .av-img-diff-label{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.avia-image-diff-container .av-img-diff-label.label-before{
	left: 10px;
}

.avia-image-diff-container .av-img-diff-label.label-after{
	right: 10px;
}

.avia-image-diff-container .avia-drag_direction-av-handle-horizontal .av-img-diff-label{
	position: absolute;
	left: 50%;
	text-align: center;
	transform: translateX(-50%);
}

.avia-image-diff-container .avia-drag_direction-av-handle-horizontal .av-img-diff-label.label-before{
	top: 10px;
}

.avia-image-diff-container .avia-drag_direction-av-handle-horizontal .av-img-diff-label.label-after{
	bottom: 10px;
	right: unset;
	top: unset;
}

/*  lottie player   */
.avia_lottie_player dotlottie-player,
.avia_lottie_player .avia-align-left dotlottie-player{
	float: left;
}

.avia_lottie_player .avia-align-right dotlottie-player{
	float: right;
}

.avia_lottie_player .avia-align-center dotlottie-player{
	float: none;
	margin: 0 auto;
}

/*button element*/
.avia_button_box > div{
	border-radius: 3px;
	color:#777;
	background-image: url("../../images/bg-button.png");
	background-repeat: repeat-x;
	background-position: 0 0;
	padding:0 10px;
	font-size: 12px;
	text-decoration: none;
	display:inline-block;
	border-style: solid;
	border-width: 1px;
	margin:3px 0;
	line-height: 28px;
	border-color: #e1e1e1;
	background-color: #f8f8f8;
	position: relative;
	font-weight:bold;
}

.avia_button_box .avia_button_icon svg:first-child{
	height: 1em;
	width: 1em;
	fill: #777;
	stroke: #777;
}

.avia_button_box .avia_button_icon img[is-svg-img="true"]{
	height: 1em;
	width: 1em;
}

.avia_button_box .avia_button_icon svg:first-child[is-colored="true"]{
	fill: unset !important;
	stroke: unset !important;
}

.avia_button_box .avia_button_icon{
	position: relative;
	left: -0.3em;
}

.avia_button_box .avia_button_icon.avia_button_icon_right{
	left: 0.3em;
}

.avia_button_box .avia-icon_select-no .avia_button_icon{
	display: none;
}

.avia_button_box .avia-size-small .avia_button_icon{
	left: 0;
}

.avia_button_box .avia-color-grey{
	background-color: #555;
	border-color: #555;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
	color: #fff;
}

.avia_button_box .avia-color-grey .avia_button_icon svg:first-child{
	fill: #fff;
	stroke: #fff;
}

.avia_button_box .avia-color-black{
	background-color: #222;
	border-color: #222;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
	color: #fff;
}

.avia_button_box .avia-color-black .avia_button_icon svg:first-child{
	fill: #fff;
	stroke: #fff;
}

.avia_button_box .avia-color-red{
	background-color: #B02B2C;
	border-color: #B02B2C;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
	color: #5d1a1b;
}

.avia_button_box .avia-color-red .avia_button_icon svg:first-child{
	fill: #5d1a1b;
	stroke: #5d1a1b;
}

.avia_button_box .avia-color-orange{
	background-color: #edae44;
	border-color: #edae44;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
	color: #745521;
}

.avia_button_box .avia-color-orange .avia_button_icon svg:first-child{
	fill: #745521;
	stroke: #745521;
}

.avia_button_box .avia-color-green{
	background-color: #83a846;
	border-color: #83a846;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
	color: #415324;
}

.avia_button_box .avia-color-green .avia_button_icon svg:first-child{
	fill: #415324;
	stroke: #415324;
}

.avia_button_box .avia-color-blue{
	background-color: #7bb0e7;
	border-color: #7bb0e7;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
	color: #3f5871;
}

.avia_button_box .avia-color-blue .avia_button_icon svg:first-child{
	fill: #3f5871;
	stroke: #3f5871;
}

.avia_button_box .avia-color-aqua{
	background-color: #4ecac2;
	border-color: #4ecac2;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
	color: #286460;
}

.avia_button_box .avia-color-aqua .avia_button_icon svg:first-child{
	fill: #286460;
	stroke: #286460;
}

.avia_button_box .avia-color-teal{
	background-color: #5f8789;
	border-color: #5f8789;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
	color: #314445;
}

.avia_button_box .avia-color-teal .avia_button_icon svg:first-child{
	fill: #314445;
	stroke: #314445;
}

.avia_button_box .avia-color-purple{
	background-color: #745f7e;
	border-color: #745f7e;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
	color: #3c3240;
}

.avia_button_box .avia-color-purple .avia_button_icon svg:first-child{
	fill: #3c3240;
	stroke: #3c3240;
}

.avia_button_box .avia-color-pink{
	background-color: #d65799;
	border-color: #d65799;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
	color: #692b4b;
}

.avia_button_box .avia-color-pink .avia_button_icon svg:first-child{
	fill: #692b4b;
	stroke: #692b4b;
}

.avia_button_box .avia-color-silver{
	background-color: #d7d7d7;
	border-color: #d7d7d7;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
	color: #444;
}

.avia_button_box .avia-color-silver .avia_button_icon svg:first-child{
	fill: #444;
	stroke: #444;
}

.avia_button_box {
	text-align: center;
}

.avia_button_box .avia-position-right{
	float:right;
	display:block;
}

.avia_button_box .avia-position-left{
	float:left;
	display:block;
}

.avia_button_box .avia-size-small{
	padding:0 10px 0px 10px;
	font-size: 13px;
	line-height: 29px;
}

.avia_button_box .avia-size-medium{
	padding:0 16px;
	font-size: 14px;
	line-height: 42px;
}

.avia_button_box .avia-size-large{
	padding: 0 43px;
	font-size: 15px;
	line-height: 46px;
	font-weight: normal;
}

.avia_button_box .avia-size-x-large{
	padding: 15px 53px;
}

/*fullwidth button*/
.av_button_big .avia_button_box>div{
	width: 100%;
	padding: 10px 0;
}

.avia-icon_select-yes .avia_button_icon_right,
.avia-icon_select-yes-left-icon .avia_button_icon_right{
	display:none;
}

.avia-icon_select-yes-right-icon .avia_button_icon_left{
	display:none;
}

/*promo box*/
.av_promobox .avia_textblock{
	position: relative;
}

.av_promobox .avia_button_box {
	border: none !important;
	position: absolute;
	right: 0;
	top: 0;
	bottom:0;
	left:0;
	z-index: 2;
}

.av_promobox .avia_button_box > div{
	right: 30px;
	top: 50%;
	position: absolute;
}

.av_promobox .avia_button_box .avia-size-small{
	margin-top:-15px;
}

.av_promobox .avia_button_box .avia-size-small svg:first-child{
	margin-right: 3px;
}

.av_promobox .avia_button_box .avia-size-medium{
	margin-top:-21px;
}

.av_promobox .avia_button_box .avia-size-large{
	margin-top:-23px;
}

.avia-promocontent{
	margin-right:240px;
	position: relative;
	z-index: 3;
}

.avia-promocontent p{
	font-size: 14px;
}

.avia-button-no .avia-promocontent{
	margin:0;
}

.avia-button-no .avia_button_box{
	display:none;
}

/*message box*/
.avia_message_box>div{
	text-align: center;
	position: relative;
	border-color: #e1e1e1;
	background-color: #f8f8f8;
}

div .avia_message_box .avia_message_box_title{
	background-color: rgba(0,0,0,0.05);
	position: absolute;
	top:0;
	left:0;
	padding:5px 20px;
	font-size: 11px;
	text-shadow: none;
}

div .avia_message_box .avia_message_box_title:empty{
	display: none;
}

.avia_message_box_content{
	font-size: 13px;
	text-transform: uppercase;
}

.avia_message_box_icon{
	position: relative;
	left: -0.5em;
	font-size: 1.3em;
}

.avia_message_box_icon svg:first-child,
.avia_message_box_icon img[is-svg-img="true"]{
	height: 1em;
	width: 1em;
	margin-bottom: -3px;
}

.avia_message_box_icon svg:first-child[is-colored="true"]{
	fill: unset !important;
	stroke: unset !important;
}

.avia_message_box .avia-size-normal{
	padding: 17px;
}
.avia_message_box .avia-size-large{
	padding: 35px;
}

.avia_message_box .avia-color-green{
	background-color: #E0F1B5;
	border-color: #8BAF5B;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
	color: #4F5F39;
}

.avia_message_box .avia-color-green svg:first-child{
	fill: #4F5F39;
	stroke: #4F5F39;
}

.avia_message_box .avia-color-blue{
	background-color: #F5F6FC;
	border-color: #9DADBF;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
	color: #4671A3;
}

.avia_message_box .avia-color-blue svg:first-child{
	fill: #4671A3;
	stroke: #4671A3;
}

.avia_message_box .avia-color-red{
	background-color: #FFF8F4;
	border-color: #CDA18F;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
	color: #AF2C20;
}

.avia_message_box .avia-color-red svg:first-child{
	fill: #AF2C20;
	stroke: #AF2C20;
}

.avia_message_box .avia-color-orange{
	background-color: #FFFDF3;
	border-color: #E6BF4A;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
	color: #C96D11;
}

.avia_message_box .avia-color-orange svg:first-child{
	fill: #C96D11;
	stroke: #C96D11;
}

.avia_message_box .avia-color-grey{
	background-color: #333;
	border-color: #444;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
	color: #fff;
}

.avia_message_box .avia-color-grey svg:first-child{
	fill: #fff;
	stroke: #fff;
}

.avia_message_box .avia-color-silver{
	background-color: #f8f8f8;
	border-color: #e1e1e1;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
	color: #444;
}

.avia_message_box .avia-color-silver svg:first-child{
	fill: #444;
	stroke: #444;
}

.avia_message_box_content p{
	display: inline;
}

.avia_message_box .avia-color-blue .avia_message_box_title{
	background: rgba(70, 113, 163, 0.08);
}

.avia_message_box .avia-color-red .avia_message_box_title{
	background: rgba(175, 44, 32, 0.06);
}

.avia_message_box .avia-color-orange .avia_message_box_title{
	background: rgba(250, 235, 125, 0.2)
}

.avia_message_box .avia-color-grey .avia_message_box_title{
	background: rgba(255, 255, 255, 0.05)
}

.avia_message_box .avia-icon_select-no .avia_message_box_icon{
	display:none
}

.avia_message_box .avia-border-solid{
	border-width:3px;
	border-style: solid;
}

.avia_message_box .avia-border-dashed{
	border-width:1px;
	border-style: dashed;
}

/*tabs element*/
.avia-tab-container a{
box-shadow: none !important;
}

.avia-tab-container .avia_title_container{
	min-height: 19px;
	min-width: 31px;
	white-space: nowrap;
}

.avia-tab-container .avia_title_container span {
	overflow: hidden;
}

.avia-tab-container .avia_content_container{
	display: none;
}

.avia-tab-container .avia-modal-group-element{
	float:left;
	border:none;
	border-right:1px dashed #e1e1e1;
}

.avia-tab-container .avia-modal-group{
	min-height: 56px;
}

.avia-tab-container .avia_title_container_inner{
	padding:0px 4px;
}

.avia-tab-container .avia-modal-group-element-inner{
	min-height: 54px;
	line-height:30px;
}

.avia-tab-container .avia-modal-group-element-highlight{
	float:left;
}

.avia-tab-container .avia-add{
	position: absolute;
	right:0; top: -25px;
	border-top:1px solid #e1e1e1;
	z-index: 2;
}

.avia-tab-container .avia-modal-group-wrapper{
	position: relative;
}

.avia-tab-container a.avia-attach-modal-element-clone.avia-clone.avia-custom-label {
    position: absolute;
    right: 73px;
    top: -25px;
    border-top: 1px solid #e1e1e1;
    z-index: 1;
}

.avia-tab-container .avia-icon_select-,
.avia-tab-container .avia-icon_select-no{
	display:none;
}

.avia_tab_icon{
	position: relative;
	left: -0.5em;
	font-size: 1.2em;
	background: #BBB;
	border-radius: 20px;
	padding: 6px;
	color: white;
	line-height: 18px;
	width: 18px;
	display: inline-table;
	text-align: center;
}

.avia_tab_icon svg:first-child{
	height: 1em;
	width: 1em;
	stroke: white;
	fill: white;
}

.avia_tab_icon img[is-svg-img="true"]{
	height: 1em;
	width: 1em;
}

.avia_tab_icon svg:first-child[is-colored="true"]{
	fill: unset;
	stroke: unset;
}

#fakeTabContent{
	min-height:150px;
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	border:1px solid #e1e1e1;
	border-top:none;
	padding:15px;
	cursor: pointer;
	overflow: hidden;
}

#fakeTabContent p{
	margin:0 0 1em 0;
}

.avia-tab-container .avia-modal-group-element{
	background: transparent;
}

.avia-tab-container .avia-modal-group-element.avia-active{
	background: #fff;
}

div.sidebar_tab .avia-modal-group{
	width:30%;
	float:left;
	min-height:42px;
}

div.sidebar_tab .avia-modal-group-element{
	float:none;
	border-right:none;
	border-bottom:1px dashed #e1e1e1;
}

div.sidebar_tab .avia-modal-group-element-highlight{
	float:none;
}

div.sidebar_tab .avia-modal-group-element:last-child{
	border:none;
}

div.sidebar_tab #fakeTabContent{
	width:70%;
	border-top:1px solid #e1e1e1;
	left:-1px;
	position: relative;
}

div.sidebar_tab_left .avia-add{
	right:1px;
}

div.sidebar_tab_right .avia-modal-group{
	float: right;
}
div.sidebar_tab_right #fakeTabContent{
	left:1px;
	float: right;
}

div.sidebar_tab .avia_title_container{
	white-space: normal;
}

div.sidebar_tab .avia-modal-group-element-inner{
	min-height: 42px;
	line-height: 18px;
}

/*progress bars*/
.avia-icon_select-no .avia_tab_icon{
	display:none;
}

/*tab elements*/
.avia-modal-tab-titles{
	background: #F1F1F1;
	overflow: hidden;
	padding: 8px 10px 0 10px;
}

.avia-modal-tab-titles a{
	text-decoration: none;
	display: block;
	padding: 10px 18px;
	color:#888;
	float: left;
}

.avia-modal-tab-titles a.active-modal-tab{
	background: #fff;
	color: #0074a2;
}

.avia-modal-tab-titles a:hover{
	color: #D54E21;
}

.avia-modal-tab-container-inner{
	float: left;
	width:100%;
}

/*toggle elements*/
a.avia-modal-toggle-title{
	background: #fff;
	overflow: hidden;
	padding: 12px 12px 12px 42px;
	margin:12px;
	text-decoration: none;
	display: block;
	color:#222;
	border: 1px solid #e1e1e1;
	font-weight: bold;
	position: relative;
}

a.avia-modal-toggle-title:hover{
	background: #f8f8f8;
}

a.avia-modal-toggle-title.active-modal-toggles{
	background:#008ec2;
	color:#fff;
	border: 1px solid #008ec2;
}

.avia-modal-toggle-ready .avia-modal-toggle-container-inner {
	border: 1px solid #e1e1e1;
	padding: 10px;
	margin: 12px;
	margin-top: -13px;
}

.avia-modal-toggle-container.avia-modal-toggle-ready.avia-modal-section_headers a.avia-modal-toggle-title{
	background: #eaeaea;
	padding-left: 15px;
}
.avia-modal-toggle-container.avia-modal-toggle-ready.avia-modal-section_headers a.avia-modal-toggle-title:hover{
	cursor: default;
}

.avia-modal-toggle-container.avia-modal-toggle-ready.avia-modal-section_headers a.avia-modal-toggle-title svg{
	display: none;
}
.avia-modal-toggle-container.avia-modal-toggle-ready.avia-modal-no_section_headers a.avia-modal-toggle-title{
	display: none;
}
.avia-modal-toggle-container.avia-modal-toggle-ready.avia-modal-no_section_headers .avia-modal-toggle-container-inner{
	 margin-top: 12px;
	 margin-bottom: -12px;
	 background: inherit;
	 border: none;
}

.avia-modal-toggle-ready .avia-modal-toggle-container-inner:after{
	content:"";
	clear:both;
	display: block;
	visibility: hidden;
}

.avia-modal .avia-modal-toggle-ready .avia-modal-toggle-container-inner{
	background: #f8f8f8;
}

.avia-modal .avia-modal-toggle-ready .avia-modal-toggle-container-inner .avia-form-element-container,
.avia-modal .avia-modal-toggle-ready .avia-modal-toggle-container-inner .avia-form-element-container:hover{
	background-color:transparent;
}

.avia-modal .avia-modal-toggle-ready .avia-modal-toggle-container-inner .avia-form-element-container:last-child{
	border-bottom: none;
}

.avia-modal-toggle-arrow{
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -13px;
	color: #222;
	fill: currentColor;
	transition: transform .3s ease-in-out;
}

a.avia-modal-toggle-title span {
	display: block;
	font-weight: normal;
}

a.avia-modal-toggle-title.active-modal-toggles .avia-modal-toggle-arrow{
	color:#fff;
	transform: rotate(180deg);
}

.avia-modal .avia-modal-toggle-container-inner .avia-toggle-description{
	float:none;
	margin: 20px;
}

.avia-modal .avia-modal-toggle-ready .avia-modal-toggle-container-inner .avia-toggle-description{
	display:none;
}

.avia-modal .avia-modal-toggle-container-inner .wp-editor-wrap,
.avia-modal .avia-modal-toggle-container-inner .wp-editor-wrap.tmce-active iframe,
/*.avia-modal .avia-modal-toggle-container-inner .wp-editor-wrap .mce-tinymce,*/
.avia-modal .avia-modal-toggle-container-inner .wp-editor-wrap .mce-tinymce .mce-edit-area{
	min-height: 300px;
}

/*iconswitcher*/
.avia-modal-iconswitcher-titles {
    padding: 0 20px;
    position: relative;
    top: 14px;
    z-index: 10;
}

.avia-modal-iconswitcher-title strong{
	display: none;
}

.avia-modal-iconswitcher-title span {
    height: 20px;
    width: 20px;
    display: inline-block;
    background: #eaeaea;
    margin-right: 2px;
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #eaeaea;
}

.avia-modal-iconswitcher-title.active-modal-icon-switcher span {
    border: 1px solid #c9c9c9;
    background: #fff;
}

.avia-modal-iconswitcher-title img{
	max-width: 100%;
	max-height: 100%;
	opacity: 0.8;
}

.avia-modal .avia-name-description.avia-iconswitcher-name-description{
	float: left;
	display: block;
	width: 100%;
	padding-left: 18px;
}

/*table element*/
.avia-table-builder-wrapper{
	position: relative;
}

.avia-table{
	width:100%;
	display:table;
	table-layout:fixed;
}

.avia-table .avia-table-row{
	display: table-row;
	position: relative;
}

.avia-table .avia-table-cell{
	display: table-cell;
	border-left: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
	padding:10px;
	background: #fff;
	cursor: pointer;
	height:	18px;
	vertical-align: middle;
	position: relative;
}

.avia-table .avia-table-cell:hover,
.avia-table .avia-show-editor{
	background: #f8f8f8;
}

.avia-table-builder-wrapper .avia-table-builder-add-buttons {
	position: absolute;
	right: 25px;
	top: -45px;
}

.avia-table .avia-table-data-container{
	display:none;
}

.avia-table .avia-show-editor .avia-table-data-container{
	display:block;
	width:100%;
	background: #fff;
}

.avia-table .avia-show-editor .avia-table-content{
	display:none;
}

.avia-modal div .avia-template-row{
	display:none;
}

.avia-table .avia-button-row .avia-table-cell,
.avia-table .avia-dynamic-data-row .avia-table-cell{
	background-color: #fff;
}

.avia-table .avia-button-row .avia-table-cell.avia-noselect:not(.avia-table-cell-delete),
.avia-table .avia-dynamic-data-row .avia-table-cell.avia-noselect:not(.avia-table-cell-delete){
	background: transparent;
}

div .avia-delete-row .avia-table-cell,
div .avia-delete-row .avia-table-cell:last-child{
	border:none;
	
	height: 25px;
	padding: 0px 10px;
}

div .avia-delete-row .avia-table-cell:hover{
	border:none;
	
}

.avia-table-builder-wrapper .avia-table .avia-table-cell-delete{
	border-bottom:none;
	border-top:none !important;
	
	width:24px;
	padding:10px 0;
}

.avia-delete-row .avia-table-cell-delete,
div .avia-delete-row .avia-table-cell-style,
.avia-table-col-style .avia-table-cell-style,
.avia-table-col-style .avia-table-cell-delete{
	visibility: hidden;
}

div .avia-table .avia-table-cell-style,
div .avia-table .avia-table-cell-style:hover{
	background: transparent;
	width: 200px;
	border:none;
}

div .avia-table .avia-table-col-style .avia-table-cell,
div .avia-table .avia-table-col-style .avia-table-cell:hover{
	background: transparent;
	border:none;
	border-bottom:1px solid #e1e1e1;
}

div .avia-table select{
	margin:0;
	width:100%;
}

div .avia-delete-row .avia-table-cell-style select{
	display:none;
}

.avia-style .avia-table .avia-desc-col {
	text-align: right;
	color: #999;
	border-left: none;
	border-bottom-style: dotted !important;
	font-style: italic;
	background: transparent;
	width:200px;
}

.avia-style .avia-table .avia-highlight-col{
	box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.2);
	z-index: 10;
	position: relative;
}

.avia-style .avia-table .avia-table-col-style .avia-highlight-col{
	box-shadow: none;
}

.avia-table .avia-new-target, .avia-table .avia-clone{
	display:none;
}

.avia-table .avia_sorthandle{
	cursor: default;
}

.avia-table .avia_button_box{
	background: #fff !important;
}

.avia-center-col{
	text-align: center;
}

.avia-pricing-row{
	font-size:40px;
	text-align: center;
	line-height: 1em;
}

.avia-pricing-row small{
	display: block;
}

.avia-move-table-row-container{
	position: relative
}

.avia-move-table-row{
	width: 30px;
	position: absolute;
	top: 50%;
}

.avia-move-table-col{
	width:60px;
	float:left;
}

.avia-table .avia-table-content select{
	width:auto;
	float: none;
	overflow: hidden;
}

.avia-table .avia-table-cell-style select{
	width:168px;
	float: none;
	overflow: hidden;
	margin-left: 30px;
}

.av-table-pos-button{
	display: block;
	background-color: #fff;
	float:left;
	height:27px;
	width:27px;
	border-radius: 2px;
	border:1px solid #e1e1e1;
	overflow: hidden;
	text-indent: -400px;
	margin:0 1px 1px 0;
	text-align: left;
}

.avia-move-table-row .av-table-pos-button{
	height: 12px;
}

.avia-table .av-table-pos-button:hover{
	border:1px solid #aaa;
	background-color: #f8f8f8;
}

.avia-modal .avia-form-element-container.avia-element-table{
	background: #FCFCFC;
}

/*team member*/
div .av_team_member .avia_inner_shortcode img{
	top:0;
	margin:0 auto 3px auto;
	display:block;
}

.avia_center_text{
	text-align: center;
}

/*flex elements that are fullwidth by default and non fullwith in columns*/
.avia-flex-element{
	border:1px solid #e1e1e1;
	background: #fff;
	padding:10px;
	max-width:500px;
}

.avia-element-items + .avia-flex-element,
.avia-element-thumbs + .avia-flex-element{
	margin-top: 10px;
}

.avia-flex-element-2nd{
	display: block;
	font-weight: bold;
	margin-top:10px;
}

.avia-flex-element-stretched{
	color: #1E8CBE;
}

.avia-flex-element-content{
	color: #D54E21;
	display:none;
}

.avia_inner_shortcode .avia_inner_shortcode .avia-flex-element-stretched{
	display:none;
}

.avia_inner_shortcode .avia_inner_shortcode .avia-flex-element-content{
	display:inline;
}

.av_one_fifth .avia-flex-element, .av_one_fourth .avia-flex-element{
	display:none;
}

/*image hotspots*/
#wpwrap .av-hotspot-container .avia-builder-prev-img-container-wrap{
	position: relative;
	float:left;
}

#wpwrap .av-hotspot-container .avia-delete-image{
	clear:both;
	top: -25px;
	left: 0px;
}

#wpwrap .avia-modal .av-hotspot-container{
	border:none;
	background: #fff;
}

#wpwrap .avia-modal .av-hotspot-container .avia-form-element{}

#wpwrap .avia-element-hotspot_image{
	background: #fff;
}

#wpwrap .avia-modal .av-hotspot-container .avia-builder-prev-img-container img{
	max-height:800px;
	padding:0;
	border:none;
	margin:0;
	max-width:100%;
}

#wpwrap .av-hotspot-holder{
	position: absolute;
	z-index: 10;
	top:0;
	left:0;
	right:0;
	bottom:0;
}

#wpwrap .av-image-hotspot{
	height:22px;
	width:22px;
	font-size: 11px;
	color:#888;
	line-height: 22px;
	text-align: center;
	position: absolute;
	z-index: 1;
	top:50%;
	left:50%;
	margin:-8px 0 0 -8px;
}

#wpwrap .av-image-hotspot_inner{
	border-radius: 100px;
	position: absolute;
	height:100%;
	width:100%;
	background: #fff;
	border:1px solid #e1e1e1;
	z-index: 2;
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
}

#wpwrap .av-image-hotspot:after {
	display: block;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 100px;
	height: 54px;
	width: 54px;
	position: absolute;
	animation: av_pulsate 2s linear infinite;
	opacity: 0;
	content: "";
	top: -15px;
	left: -15px;
	z-index: 1;
}

#wpwrap .av-image-hotspot_inner:hover,
#wpwrap .av-image-hotspot.active_tooltip .av-image-hotspot_inner,
#wpwrap .av-image-hotspot.ui-draggable-dragging .av-image-hotspot_inner{
	background: #1E8CBE;
	color: #FFF;
	border: 1px solid #1579A7;
}

#wpwrap .av-image-hotspot.ui-draggable-dragging .av-image-hotspot_inner{
	cursor: move;
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
}

.avia_hotspot_image .avia-flex-element {
	position: absolute;
	bottom: 30px;
	left: 4%;
	width: 86%;
	padding: 3%;
	white-space: normal;
	height: auto;
	max-width:86%;
	text-align: center;
}

.avia_hotspot_image {
	background: #F8F8F8;
	padding: 10px 10px 6px 10px;
	border: 1px solid #E1E1E1;
	min-height: 300px;
}

.av_one_fifth .avia_hotspot_image,
.av_one_fourth .avia_hotspot_image{
	min-height: 0;
}

.avia_layout_column .avia_hotspot_image{
	background: #fff;
}

.avia_hotspot_image img{
	max-width:100%;
	height:auto;
}

#wpwrap .avia_hotspot_image .av_hotspot_image_caption{
	position: relative;
	top: 29px;
	margin-bottom: -20px;
	white-space: normal;
	height: auto;
}

/*image hotspot pulse*/
@keyframes av_pulsate {
    0% 		{transform: scale(0.1); opacity: 0.0;}
    50% 	{opacity: 1.0;}
    100% 	{transform: scale(1); opacity: 0.0;}
}

/*catalogue*/
.av_catalogue .avia_inner_shortcode img,
.av_productlist .avia_inner_shortcode img{
	margin:0;
}

.av_catalogue .avia-element-label,
.av_productlist .avia-element-label{
	display:block;
}

.avia-disabled-aviaTBaviaTBdisabled span,
.avia-disabled-true span{
	color: #D54E21;
}

/*button row*/
.av_buttonrow .avia_inner_shortcode img,
.av_productlist .avia_inner_shortcode img{
	margin:0;
}

.av_buttonrow .avia-element-label,
.av_productlist .avia-element-label{
	display:block;
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px)
{
}

/*drag and drop system*/
body div.ui-draggable-dragging{
	width:240px;
}

body .ui-draggable-dragging .avia_inner_shortcode{
	height: 110px;
	background-color: #fff;
	border:1px solid #e1e1e1;
	overflow: hidden;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
	display: block;
	padding: 0;
}

body .ui-draggable-dragging .avia_inner_shortcode>div,
body .ui-draggable-dragging .avia_inner_shortcode img{
	visibility: hidden;
}

.ui-draggable-dragging>.avia_sorthandle {
	opacity: 1;
	z-index: 1000;
}

#wpwrap .avia-hover-active{
	background: #F7FFF2;
	border: 1px dashed #9ACF57;
}

/*drag drop highlight of single elements*/
.avia-select-target-1.av_drop[data-dragdrop-level="0"],
.avia-select-target-2.av_drop[data-dragdrop-level="0"],
.avia-select-target-3.av_drop[data-dragdrop-level="0"],
.avia-select-target-4.av_drop[data-dragdrop-level="0"],
.avia-select-target-1 .av_drop[data-dragdrop-level="0"],
.avia-select-target-2 .av_drop[data-dragdrop-level="1"],
.avia-select-target-3 .av_drop[data-dragdrop-level="2"],
.avia-select-target-3 .av_drop[data-dragdrop-level="1"],
.avia-select-target-4 .av_drop[data-dragdrop-level="3"],
.avia-select-target-4 .av_drop[data-dragdrop-level="2"],
.avia-select-target-4 .av_drop[data-dragdrop-level="1"]{
	background: #F2F9FF;
	border: 1px dashed #4D9EDD;
}

.avia-select-target-2 .av_drop[data-dragdrop-level="1"],
.avia-select-target-3 .av_drop[data-dragdrop-level="1"],
.avia-select-target-4 .av_drop[data-dragdrop-level="1"] {
	background: #E5F3FF;
}

.avia-select-target-4 .av_drop[data-dragdrop-level="2"],
.avia-select-target-3 .av_drop[data-dragdrop-level="2"]{
	background: #DFF0FF;
}

/*target mode highlight of elements*/
.avia-hover-target{
	cursor: crosshair;
}

.avia-hover-target.av_drop[data-dragdrop-level="0"]:hover,
.avia-hover-target.avia-select-target-1 .av_drop:hover[data-dragdrop-level="0"],
.avia-hover-target.avia-select-target-2 .av_drop:hover[data-dragdrop-level="1"],
.avia-hover-target.avia-select-target-3 .av_drop:hover[data-dragdrop-level="2"],
.avia-hover-target.avia-select-target-3 .av_drop:hover[data-dragdrop-level="1"],
.avia-hover-target.avia-select-target-4 .av_drop:hover[data-dragdrop-level="3"],
.avia-hover-target.avia-select-target-4 .av_drop:hover[data-dragdrop-level="2"],
.avia-hover-target.avia-select-target-4 .av_drop:hover[data-dragdrop-level="1"]{
	background: #F7FFF2;
	border: 1px dashed #9ACF57;
}

/*drag and drop special elements like hr*/
body .ui-draggable-dragging.av_hr .avia_inner_shortcode{
	display:none;
}

/*ELEMENTS IN META BOX*/

.inside .avia_meta_box_heading{
	padding:11px;
	border:1px solid #e1e1e1;
	background: #fff;
	margin-bottom: 9px;
	clear: both;
}

.inside .avia_meta_box_heading .avia-name-description > strong{
	font-size: 16px;
	margin-bottom: 9px;
}

div.avia_meta_box_hr {
	margin: 12px 0px 32px 0;
	clear: both;
	float: left;
	width: 100%;
}

div .avia-element-hr{
	padding:0;
}

.avia-builder-hr{
	clear:both;
	width:100%;
	border-top:1px solid #e1e1e1;
	border-bottom:1px solid #fff;
}

.avia-conditional-elements{
	position: relative;
	clear: both;
	overflow: hidden;
}

.av_option_hidden .av_conditional_overlay,
.av-builder-active-overlay{
	opacity: 0.6;
	background: #fff;
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index: 2;
	border:1px solid #e1e1e1;
}

.av_option_hidden .av_conditional_overlay_content,
.av-builder-active-overlay-content{
	z-index: 20;
	position: absolute;
	color:#333;
	background: #fff;
	border-radius: 2px;
	width:60%;
	margin-left:10%;
	padding:10%;
	top:25%;
	border: 1px solid #E1E1E1;
}

.av_option_hidden .av_conditional_overlay_content a{
	color:#2EA2CC;
}

.av-builder-active-overlay-content{
	width:72%;
	padding:3%;
	top:10%;
}

.avia-advanced-editor-enabled .av-builder-active-overlay-content,
.avia-advanced-editor-enabled .av-builder-active-overlay{
	display:none;
}

.avia-advanced-editor-enabled #poststuff div#formatdiv {
	display: none;
}

.av_option_hidden .av_option_hidden .av_conditional_overlay_content,
.av_option_hidden .av_option_hidden .av_conditional_overlay{
	display:none;
}

.avia-modal .av_option_hidden .av_conditional_overlay_content{
	z-index: 2;
    position: absolute;
    color: #FFF;
    background: rgba(96, 96, 96, 0.85);
    border-radius: 2px;
    width: 60%;
    margin-left: 10%;
    padding: 10px 10%;
    top: 25%;
    border: 1px solid #626262;
    text-align: center;
}

/*section bgs + col/cell bgs*/
.avia-layout-element-bg{
	position: absolute;
	top:25px;
	left:0;
	right:0;
	bottom: 0;
	z-index: 0;
	opacity: 0.1;
}

.avia_layout_row > .avia_inner_shortcode{
	display: table;
	table-layout: fixed;
	width: calc(100% - 2px);
}

.block-editor-page .avia_layout_row > .avia_inner_shortcode{
	width:100%;
}

.avia_layout_row > .avia_inner_shortcode > .avia_layout_cell{
	display: table-cell;
	float:none;
	vertical-align: top;
}

.avia_layout_column{
	background-color: #f8f8f8;
}
.avia_layout_cell {
	background-color: #fff;
}

.avia-element-bg-color {
	border-radius: 10px;
	height: 12px;
	width: 12px;
	display: inline-block;
	margin-right: 3px;
	border: 1px solid #e1e1e1;
	position: relative;
	top: 2px;
	left: -3px;
}

a.avia-layout-element-hidden {
	display: none;
	color: #999;
	text-decoration: none;
	text-align: center;
	padding: 20px;
	border: 1px solid #e1e1e1;
	border-top: none;
	position: relative;
	z-index: 10;
}

a.avia-layout-element-hidden:hover {
	background: #fcfcfc;
	color: #666;
}

.av-layout-element-closed a.avia-layout-element-hidden {
    display: block;
}

.av-layout-element-closed .avia_inner_shortcode,
.av-layout-element-closed .avia-layout-element-bg,
.av-layout-element-closed .avia-add-cell ,
.av-layout-element-closed .avia-set-cell-size{
	display: none;
}

a.avia-toggle-visibility {
	height: 24px;
	flex-basis: 26px;
	width: 26px;
	line-height: 24px;
	overflow: hidden;
	color: #999;
	border-inline-end: 1px solid #e1e1e1;
	opacity: 0;
}

.avia-toggle-visibility:before{
	content: "\f142";
	display: inline-block;
	font: normal 24px/1 dashicons;
	speak: none;
	-webkit-font-smoothing: antialiased;		/*	non standard	*/
	-moz-osx-font-smoothing: grayscale;
	text-decoration: none !important;
}

a.avia-toggle-visibility:hover{
	color: #00a0d2;
}

.av-layout-element-closed .avia-toggle-visibility:before{
	content: "\f140";
}

.avia_layout_column_no_cell > div > .avia-element-bg-color {
	top: 6px;
	left: auto;
	right: 6px;
	margin: 0;
	position: absolute;
	opacity: 1;
	z-index: -1;
}

/*
 * The colour of an element is shown as a dot until it is hovered, and then it gives way to the
 * buttons that appear in the same corner.
 *
 * A cell is left out of that. It carries the column class as well, so it used to fade its dot too -
 * but a cell keeps its dot beside the size label at the other end of the row, where no button ever
 * appears, so it was making room for nothing and the colour disappeared exactly when it was being
 * looked at.
 */
.avia_layout_column_no_cell:hover > div > .avia-element-bg-color,
.avia_layout_column:not( .avia_layout_cell ):hover .avia-element-bg-color,
.avia_layout_section:hover >.avia_sorthandle > .avia-element-bg-color,
.avia_sortable_element:hover .avia-element-bg-color{
	opacity: 0;
}

/* TAB SECTION */

.avia_layout_tab{
	width:auto;
	float:none;
	display: none;
	margin: 1px 0 0 0;
}

.avia_layout_tab > .avia_sorthandle {
	background: #fff;
	border: none;
	box-shadow: none;
	border: 1px solid #e1e1e1;
	border-right: none;
	border-left: none;
}

.avia_tab_section>.avia_inner_shortcode{
	padding:1px 0 0 0;
	background: #fff;
}

.avia_layout_tab>.avia_inner_shortcode{
	border-color:transparent;
}

.avia_tab_section_titles {
    margin: 0 0 -1px 0;
    position: relative;
    z-index: 100;
    padding: 14px 130px 0 16px;
}

.avia_tab_section_titles .av-admin-section-tab,
.av-admin-section-tab-placeholder{
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid #e1e1e1;
	text-decoration: none;
	background: #f8f8f8;
	vertical-align: bottom;
	white-space: nowrap;
	margin-right: -1px;
	margin-bottom: -1px;
}

.av-admin-section-tab.av-admin-section-tab-active{
	border-bottom-color: #fff;
	background-color: #fff;
}

.av-admin-section-tab-content-active{
	display: block;
}

.avia_tab_section_titles .avia-add{
	display: block;
	text-indent: 0;
    width: auto;
    padding: 0 14px 0 28px;
    border-top: 1px solid #e1e1e1;
    text-decoration: none;
    color: #999;
    position: absolute;
    right:16px;
    top: 14px;
}

/*
 * Same as the labelled add buttons above: this one is as wide as its words with the glyph in the
 * gutter its padding reserves, and the layer that draws the glyph is pinned to all four edges - so
 * left alone it centres the plus over the middle of the button, on top of "Add Tab". Confining it to
 * that gutter puts it back beside the label.
 */
.avia_tab_section_titles .avia-add::before{
	right: auto;
	width: 28px;
}

.avia_tab_section_titles .avia-add-tab{
	margin-left:10px;
}

.av-admin-section-tab-move-handle{
	height: 20px;
	width: 24px;
	cursor: move;
	
	display: inline-block;
	vertical-align: bottom;
	margin: 0 2px 0 2px;
	position: relative;
	top: -2px;
	left: -10px;
}

.av-admin-section-tab-placeholder{
	background: #e1e1e1;
}

.avia_layout_tab .avia_layout_column{
	background: #f1f1f1;
}

.av-admin-section-tab-content-active > .avia_sorthandle a{
	opacity: 1;
}

span.av-tab-title-text-wrap-full {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    max-width: 120px;
    text-overflow: ellipsis;
}

/*	Avia Player	*/
.avia_inner_shortcode .av-player{
	display: inline-block;
	padding: 7px;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
}

.avia_inner_shortcode .av-player .av-player-manual .av-play-manual,
.avia_inner_shortcode .av-player .av-player-autoplay .av-play-autoplay{
	display: inline-block;
}

.avia_inner_shortcode .av-player .av-player-manual  .av-play-autoplay,
.avia_inner_shortcode .av-player .av-player-autoplay .av-play-manual{
	display: none;
}

.avia_inner_shortcode .av-player .av-player-autoplay .av-play-autoplay{
	color: #0085ba;
}

/*	Product Info Tab		*/
.avia_inner_shortcode .avia-flex-element.product-info-tabs ul{
	list-style: disc;
	text-align: left;
	padding: 0 0 0 10px;
}

/* Search Element */
.avia-sc-search-fakeinput {
	padding: 4px;
	border: 1px solid #ccc;
	margin-right: 3px;
	min-width: 140px;
	height: 19px;
	text-align: left;
}

.avia-search-container .avia_icon_char svg:first-child{
	margin-bottom: -2px;
}

/*	Google Maps	*/
.avia_inner_shortcode .av-google-maps{
	margin-bottom: 5px;
	display: inline-block;
}

.avia_inner_shortcode .av-google-maps .av-gmap- .av-gmap-link-,
.avia_inner_shortcode .av-google-maps .av-gmap-confirm_link .av-gmap-link-confirm_link,
.avia_inner_shortcode .av-google-maps .av-gmap-page_only .av-gmap-link-page_only{
	display: inline-block;
}

.avia_inner_shortcode .av-google-maps .av-gmap- .av-gmap-link-confirm_link,
.avia_inner_shortcode .av-google-maps .av-gmap- .av-gmap-link-page_only,
.avia_inner_shortcode .av-google-maps .av-gmap-confirm_link .av-gmap-link-,
.avia_inner_shortcode .av-google-maps .av-gmap-confirm_link .av-gmap-link-page_only,
.avia_inner_shortcode .av-google-maps .av-gmap-page_only .av-gmap-link-,
.avia_inner_shortcode .av-google-maps .av-gmap-page_only .av-gmap-link-confirm_link{
	display: none;
}

/*	Sort shortcodes dropdown	*/
#avia-sort-list-dropdown {
	position: absolute;
	top: 2px;
	right: 49px;
	font-size: 12px;
	color: #777777;
	z-index: 20;
	background: #fff;
	padding: 0;
	height: 37px;
	line-height: 15px;
	overflow: hidden;
}

#avia-sort-list-dropdown:hover{
	overflow: visible;
	cursor:pointer;
}

#avia-sort-list-dropdown ul,
#avia-sort-list-dropdown li{
	margin: 0;
}

#avia-sort-list-dropdown .avia-font-entypo-fontello {
	width: 80px;
	height: 80px;
	font-size: 14px;
	margin-right: 7px;
	position: relative;
	top: 1px;
}

#avia-sort-list-dropdown .avia-sort-list-select {
	padding: 10px;
	background: #fff;
	border: 1px solid #e1e1e1;
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
	min-height: 17px;
}

#avia-sort-list-dropdown .avia-sort-list-main {
    margin-top: 11px;
}

#avia-sort-list-dropdown:hover .avia-sort-list-main{
	display: block;
}

#avia-sort-list-dropdown a{
	text-decoration: none;
}
#avia-sort-list-dropdown .avia-sort-list-main li{
	border-top: 1px solid #e1e1e1;
	padding: 8px;
}

#avia-sort-list-dropdown .avia-sort-list-main li:hover{
	background: #f8f8f8;
	color: #d04947;
}

#avia-sort-list-dropdown a.sort_active{
	color: #d04947;
}

li.avia-sort-list-wrap strong {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.shortcode_button_wrap .avia-tab-title-container {
    padding-right: 230px;
}

/*	Custom ALB element tempates select shortcode type dropdown	*/
#avia-select-shortcode-type-dropdown{
    position: absolute;
    top: 2px;
    left: 0;
    font-size: 12px;
    color: #777777;
    z-index: 20;
    background: #fff;
    padding: 0;
    height: 37px;
    line-height: 15px;
    overflow: hidden;
}

#avia-select-shortcode-type-dropdown:hover{
	overflow: visible;
	cursor: pointer;
}

#avia-select-shortcode-type-dropdown ul:hover{
	display: inline-block;
}

#avia-select-shortcode-type-dropdown ul,
#avia-select-shortcode-type-dropdown li{
	margin: 0;
}

#avia-select-shortcode-type-dropdown + a,
.avia-tab-title-container a.avia-needs-margin{
	margin-left: 150px;
}

.shortcode_button_wrap.avia-custom-elements-condensed #avia-select-shortcode-type-dropdown{
	display: none;
}

.shortcode_button_wrap.avia-custom-elements-condensed #avia-select-shortcode-type-dropdown + a,
.shortcode_button_wrap.avia-custom-elements-condensed a.avia-needs-margin{
	margin-left: 0;
}

.av-custom-element-tab{
	min-height:69px;
}

.avia-builder-main-wrap .button.element-button-end-edit{
	background: #d54e21;
	border-color:#c74418;
}

#avia-select-shortcode-type-dropdown .avia-font-entypo-fontello{
    width: 80px;
    height: 80px;
    font-size: 14px;
    margin-right: 7px;
    position: relative;
    top: 1px;
}

.avia-font-entypo-fontello.avia-svg-icon svg:first-child{
	height: 1em;
	width: 1em;
	fill: #777777;
	stroke: unset;
}

#avia_builder .avia-font-entypo-fontello.avia-svg-icon img[is-svg-img="true"]{
	height: 1em;
	width: 1em;
}

#avia-select-shortcode-type-dropdown .avia-select-shortcode-type-select {
	padding: 10px;
	background: #fff;
	border: 1px solid #e1e1e1;
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
	min-height: 17px;
}

#avia-select-shortcode-type-dropdown .avia-select-shortcode-type-list-main {
    margin-top: 11px;
}

#avia-select-shortcode-type-dropdown:hover .avia-select-shortcode-type-list-main{
	display: block;
}

#avia-select-shortcode-type-dropdown a{
	text-decoration: none;
}
#avia-select-shortcode-type-dropdown .avia-select-shortcode-type-list-main li{
	border-top: 1px solid #e1e1e1;
	padding: 0 8px;
}

#avia-select-shortcode-type-dropdown .avia-select-shortcode-type-list-main li:hover{
	background: #f8f8f8;
	color: #d04947;
}

#avia-select-shortcode-type-dropdown a.shortcode-type-active{
	color: #d04947;
}

li.avia-select-shortcode-type-list-wrap strong {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.shortcode_button_wrap .avia-tab-title-container {
    /*padding-right: 230px;*/
}

.ajax_load {
	width: 40px;
	height: 100%;
	line-height: 40px;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	margin: 0;
	border-radius: 0;
	min-width: 40px;
}

.avia_mobile .ajax_load {
	height: 41px;
}

.ajax_load {
	z-index: 5;
}

.ajax_load_inner {
	background: url("../../images/loading.gif") no-repeat scroll center center #fff;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.avia_button_inactive {
	opacity: 0.3;
	pointer-events: none;
	background: gray;
	cursor: default;
}

body.avia-force-alb #avia-builder-button{
	display: none;
}

body.block-editor-page.avia-force-alb .avia-builder-button{
	display: none !important;
}


/* ----------------------------------------------------------------------------
   Builder interface icons
   ----------------------------------------------------------------------------
   These used to be png sprites: one image per control, with the hover state
   stacked underneath the resting one inside the same file, and a third blank
   frame that nothing ever used. The glyph is now an svg mask painted with a
   background colour, so hover is a colour change and the extra frames are gone.

   The mask sits on a ::before rather than on the control itself because several
   of these controls carry their own background - a white button face, a table
   cell - and a mask on the element would clip that away with the glyph.

   Colours are the ones the sprites were drawn in: black at low opacity resting,
   Enfold blue on hover, and the delete red for anything destructive.

   @since 8.0
   ---------------------------------------------------------------------------- */
:root{
	--av-ui-icon: rgba( 0, 0, 0, .35 );
	--av-ui-icon-hover: #278ab7;
	--av-ui-icon-danger: #cb4a1f;

	/*
	 * One knob for every icon in the builder. The width and height inside each svg
	 * file are only the intrinsic size a browser falls back to - these win over them,
	 * so the files never need touching to change the scale.
	 *
	 * The element icons sit at 32px: they label a button in the picker and carry the
	 * element name on the canvas, so they read as artwork rather than as controls -
	 * and on the canvas they are the only thing distinguishing one row from the next.
	 * The toolbar icons are controls packed into a 24px box and want a smaller glyph.
	 */
	--av-icon-size: 20px;
	--av-ui-icon-size: 17px;
	--av-element-icon-size: 32px;
}

/*
 * What an element holds, listed under its name on the canvas - see editor_element_items() in
 * class-shortcode-template.php.
 *
 * Set quieter and smaller than the name: it answers "which accordion is this" at a glance, and the
 * moment it competes with the element name it stops doing that. One line only - a long list turns a
 * canvas of elements back into a wall of text, which is what the icons were meant to fix.
 */
.avia_inner_shortcode .avia-element-items{
	/*
	 * Centred to sit under the element name above it, and allowed to wrap: a chip cut in half by the
	 * edge of the element says less than no chip at all, and the count past the cap keeps the row
	 * short enough that wrapping stays rare.
	 */
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	line-height: 1.45;
	color: #888;
}

/*
 * Each item is its own span, so it can be drawn as a thing rather than as a run of words - which is
 * what makes four field names read as four fields. Spacing is the container's gap, not a character
 * written between them.
 */
.avia_inner_shortcode .avia-element-item,
.avia_inner_shortcode .avia-element-items-rest{
	padding: 7px;
	border: 1px solid #e1e1e1;
	border-radius: 3px;
}

.avia_inner_shortcode .avia-element-items-rest{
	font-style: italic;
	border-style: dashed;
}

/*
 * The items themselves, when there is wording either side of them. It exists only to be the thing a
 * live update rebuilds, so it hands its children straight to the row above and takes up no space of
 * its own - the chips stay in one row with the sentence rather than forming a row inside it.
 */
.avia_inner_shortcode .avia-element-items-list{
	display: contents;
}

/*
 * Wording of the element's own that belongs with the items - the text a Headline Rotator keeps either
 * side of the words it cycles through. Left unboxed on purpose: it is the sentence around the items,
 * not another one of them, and drawing it as a chip would say the opposite.
 */
.avia_inner_shortcode .avia-element-items-static{
	align-self: center;
	color: #999;
}

.avia_inner_shortcode .avia-element-items-static:empty,
.avia_inner_shortcode .avia-element-items:empty,
.avia_inner_shortcode pre.avia-element-code:empty{
	display: none;
}

/*
 * The first lines of a code block, as written.
 *
 * Clipped rather than scrolled: the canvas is scanned, and a box that scrolls invites the reader to
 * work through it. The server sends only the first lines anyway - this holds the height while the
 * live update, which sends what is being typed, is longer than that.
 */
/*
 * The share buttons an element offers, drawn as the icons themselves.
 *
 * Every network the element knows is drawn and the stylesheet keeps the chosen ones. A checkbox that
 * is off leaves its class ending in nothing - avia-share_svg__facebook- with no value after it - and
 * that is what the rule below reads. It works for any network without naming one, and it keeps up as
 * boxes are ticked, because the canvas rewrites that class the moment the setting changes.
 */
.avia_inner_shortcode .avia-element-social{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
	color: #777;
}

.avia_inner_shortcode .avia-element-social > span{
	display: contents;
}

.avia_inner_shortcode .avia-element-social span[data-update_class_with^="share_svg__"]{
	display: none;
}

/*
 * Shown only when its checkbox carries a value. Unticked reads two ways depending on who drew it -
 * the server leaves the class ending in nothing after the dash, the canvas empties the attribute
 * altogether when it rewrites it - so the rule turns icons on rather than off, and neither form of
 * "not chosen" can slip through.
 */
.avia_inner_shortcode .avia-element-social span[data-update_class_with^="share_svg__"][class]:not( [class$="-"] ):not( [class=""] ){
	display: block;
}

/*
 * Where the blog's own set is chosen, shown only while the element follows it. Quiet, because it is a
 * note about where a setting lives rather than part of what the element will render.
 */
.avia_inner_shortcode .avia-element-social .avia-element-share-source{
	align-self: center;
	color: #888;
	font-size: 11px;
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

.avia_inner_shortcode .avia-element-social .avia-element-share-source:hover,
.avia_inner_shortcode .avia-element-social .avia-element-share-source:focus-visible{
	color: #555;
	border-bottom-style: solid;
}

.avia_inner_shortcode .avia-element-social .avia-buttons-custom .avia-element-share-source{
	display: none;
}

.avia_inner_shortcode .avia-element-social svg{
	display: block;
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/*
 * The pictures an element holds, shown as they are.
 *
 * Drawn like the previews in the element window - a square on a light ground with a hairline round it -
 * so the canvas and the window that fills it look like the same thing, only smaller. A gallery is told
 * from the one below it by what is in it, which no amount of naming achieves.
 *
 * The first few only, with a count for the rest: this is a glance, and a row that wraps for three lines
 * stops being one.
 */
.avia_inner_shortcode .avia-element-thumbs{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.avia_inner_shortcode .avia-element-thumbs:empty{
	display: none;
}

.avia_inner_shortcode .avia-element-thumbs img{
	width: 42px;
	max-width: 42px;
	height: 42px;
	max-height: 42px;
	object-fit: cover;
	display: block;
	border: 1px solid #e1e1e1;
	background: #f8f8f8;
	box-sizing: border-box;
	border-radius: 2px;
	margin:0;
	top:0;
}

.avia_inner_shortcode .avia-element-thumbs .avia-element-items-rest{
	align-self: center;
}

.avia_inner_shortcode pre.avia-element-code{
	margin: 15px 0 0 0 ;
	padding: 8px 10px;
	max-height: 7.2em;
	overflow: hidden;
	border: 1px solid #e1e1e1;
	border-radius: 3px;
	background: #fbfbfb;
	color: #666;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 1.45;
	white-space: pre;
	text-align: start;
	/* a long line should not stretch the element - it scrolls nowhere, it simply ends */
	text-overflow: ellipsis;
}

/*
 * An element that can take its content from two places draws both and hides one, so that flipping the
 * setting in the element window swaps them at once rather than at the next redraw. The class comes
 * from the setting itself and the canvas keeps it in step - see editor_element_items().
 */
.avia_inner_shortcode .avia-which_menu-custom > .avia-element-items-alt,
.avia_inner_shortcode [data-update_class_with]:not( .avia-which_menu-custom ) > .avia-element-items:not( .avia-element-items-alt ){
	display: none;
}

/*
 * The Custom Layout element names the entry it pulls in, and that name opens it for editing. It is
 * underlined only on hover: on a canvas full of element names, one permanently underlined would read
 * as an error rather than as a link.
 */
.avia_inner_shortcode a.av-postcontent-edit{
	color: #fff;
	text-decoration: none;
	padding: 7px;
	background: var(--wp-admin-theme-color);
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.avia_inner_shortcode a.av-postcontent-edit:hover,
.avia_inner_shortcode a.av-postcontent-edit:focus-visible{
	opacity: 0.8;
}

/*
 * Says that this one leaves the page - it opens the entry it names in a tab of its own, which is worth
 * knowing before it is clicked rather than after. Drawn from the icon rather than written into the
 * markup, so the live update does not have to carry it.
 */
.avia_inner_shortcode a.av-postcontent-edit::after{
	content: '';
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url( ../../icons/ui/open_in_new.svg ) center / 14px 14px no-repeat;
	        mask: url( ../../icons/ui/open_in_new.svg ) center / 14px 14px no-repeat;
}

/* the kind of entry, beside its name - said quietly, the name is the thing being read */
.avia_inner_shortcode .av-postcontent-type{
	opacity: 0.75;
}

.avia-hotkey-info::before,
.avia-alb-fullscreen::before,
.avia-undo-button::before,
.avia-redo-button::before,
.avia-delete::before,
.avia-template-save-button-inner ul li .avia-delete-template::before,
.avia-save-element::before,
.avia_sorthandle .avia-edit-element::before,
.avia_sorthandle .avia-clone::before,
.avia-change-col-size::before,
.avia-modal-group-element .avia-move-handle::before,
.avia-add::before,
.avia-clone::before,
.avia-set-cell-size::before,
.av-admin-section-tab-move-handle::before,
.avia-table .avia-button-row .avia-table-cell::before,
.avia-table .avia-dynamic-data-row .avia-table-cell::before,
div .avia-delete-row .avia-table-cell::before,
.avia-table-builder-wrapper .avia-table .avia-table-cell-delete::before,
.av-table-pos-button::before,
.avia-alb-panel-side #avia-sort-list-dropdown .avia-sort-list-wrap > strong > span.avia-font-entypo-fontello::before,
#avia_builder a.open-template-button.button::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var( --av-ui-icon );
	-webkit-mask: var( --av-ui-glyph ) center / var( --av-ui-icon-size ) var( --av-ui-icon-size ) no-repeat;
	        mask: var( --av-ui-glyph ) center / var( --av-ui-icon-size ) var( --av-ui-icon-size ) no-repeat;
	transition: background-color .15s ease;
	pointer-events: none;
}

/* controls that never needed a positioning context while the glyph was a background */
.avia-undo-button,
.avia-redo-button,
.avia-set-cell-size,
.av-table-pos-button,
.avia-table .avia-button-row .avia-table-cell,
.avia-table .avia-dynamic-data-row .avia-table-cell,
div .avia-delete-row .avia-table-cell,
.avia-table-builder-wrapper .avia-table .avia-table-cell-delete{
	position: relative;
}

/* which glyph each control wears */
.avia-hotkey-info{ --av-ui-glyph: url( ../../icons/ui/keyboard.svg ); }
.avia-alb-fullscreen{ --av-ui-glyph: url( ../../icons/ui/open_in_full.svg ); }
.avia-alb-fullscreen.avia-alb-fullscreen-active{ --av-ui-glyph: url( ../../icons/ui/close_fullscreen.svg ); }
.avia-undo-button{ --av-ui-glyph: url( ../../icons/ui/undo.svg ); }
.avia-redo-button{ --av-ui-glyph: url( ../../icons/ui/redo.svg ); }
.avia-delete,
.avia-template-save-button-inner ul li .avia-delete-template,
div .avia-delete-row .avia-table-cell,
.avia-table-builder-wrapper .avia-table .avia-table-cell-delete{ --av-ui-glyph: url( ../../icons/ui/delete.svg ); }
.avia-save-element{ --av-ui-glyph: url( ../../icons/ui/save.svg ); }
.avia_sorthandle .avia-edit-element{ --av-ui-glyph: url( ../../icons/ui/edit.svg ); }
.avia-clone,
.avia_sorthandle .avia-clone{ --av-ui-glyph: url( ../../icons/ui/content_copy.svg ); }
.avia-change-col-size{ --av-ui-glyph: url( ../../icons/ui/keyboard_double_arrow_right.svg ); }
.avia-change-col-size.avia-smaller{ --av-ui-glyph: url( ../../icons/ui/keyboard_double_arrow_left.svg ); }
.avia-modal-group-element .avia-move-handle,
div.sidebar_tab .avia-modal-group-element .avia-move-handle{ --av-ui-glyph: url( ../../icons/ui/drag_indicator.svg ); }
.avia-tab-container .avia-modal-group-element .avia-move-handle,
.av-admin-section-tab-move-handle{ --av-ui-glyph: url( ../../icons/ui/drag_handle.svg ); }
.avia-add,
.avia-table .avia-button-row .avia-table-cell,
.avia-table .avia-dynamic-data-row .avia-table-cell{ --av-ui-glyph: url( ../../icons/ui/add.svg ); }
.avia-set-cell-size{ --av-ui-glyph: url( ../../icons/ui/swap_horiz.svg ); }
.av-table-pos-button.av-table-left{ --av-ui-glyph: url( ../../icons/ui/arrow_back.svg ); }
.av-table-pos-button.av-table-right{ --av-ui-glyph: url( ../../icons/ui/arrow_forward.svg ); }
.av-table-pos-button.av-table-up{ --av-ui-glyph: url( ../../icons/ui/arrow_upward.svg ); }
.av-table-pos-button.av-table-down{ --av-ui-glyph: url( ../../icons/ui/arrow_downward.svg ); }
#avia_builder a.open-template-button.button{ --av-ui-glyph: url( ../../icons/ui/library_books.svg ); }

/* hover */
.avia-hotkey-info:hover::before,
.avia-undo-button:hover::before,
.avia-redo-button:hover::before,
.avia-save-element:hover::before,
.avia_sorthandle .avia-edit-element:hover::before,
.avia_sorthandle .avia-clone:hover::before,
.avia-add:hover::before,
.avia-add:active::before,
.avia-clone:hover::before,
.avia-clone:active::before,
.avia-set-cell-size:hover::before,
.avia-set-cell-size:active::before,
.avia-change-col-size:hover::before,
.av-table-pos-button:hover::before,
.avia-modal-group-element .avia-move-handle:hover::before,
.avia-modal-group-element .avia-move-handle:active::before,
#avia_builder a.open-template-button.button:hover::before,
#avia_builder a.av-template-added-highlight.button::before{
	background-color: var( --av-ui-icon-hover );
}

.avia-delete:hover::before,
.avia-template-save-button-inner ul li .avia-delete-template:hover::before,
div .avia-delete-row .avia-table-cell:hover::before,
.avia-table-builder-wrapper .avia-table .avia-table-cell-delete:hover::before{
	background-color: var( --av-ui-icon-danger );
}

/*
 * The template button is the one control where the glyph is not centred: it sits
 * beside a text label, which is what the 33px left padding is holding room for.
 */
#avia_builder a.open-template-button.button::before{
	right: auto;
	left: 4px;
	top: 3px;
	width: 24px;
	height: 24px;
}


/* ==========================================================================
   Element panel - sidebar layout

   Opt-in through Theme Options > Layout Builder > "Position Of The Element Panel".
   The toolbar layout above is untouched; everything here hangs off the two classes the
   theme option adds, so both layouts share one set of markup.

   The panel is attached to <body> rather than to the metabox (see avia-element-behavior.js):
   the block editor puts a filter on its metabox wrapper, which would turn position:fixed into
   something that scrolls away with the page.
   ========================================================================== */

body{
	/* editor chrome the panel has to clear - written by sync_chrome_offset() */
	--av-alb-chrome-top: 0px;
	--av-alb-chrome-start: 0px;
	/* fits three element icons per row - the default until the user drags the edge */
	--av-alb-sidebar-width: 309px;
	/*
	 * What one column of element buttons costs the panel. Read by avia-panel-resize.js to work out
	 * which step the user is dragging towards; the widths below are the same arithmetic written out.
	 *
	 * 92px, not the 86px a button measures: the buttons are floated, and a float wraps on its margin
	 * box, so the 6px gutter after the last one in a row has to fit as well or the row is one short.
	 * The measured minimums are 215, 307 and 399 - each width below clears its own by 2px so that a
	 * scrollbar a pixel wider than this machine's cannot cost a column.
	 */
	--av-alb-panel-width-min: 125px;
	--av-alb-panel-width-step: 92px;
}

/*
 * The four widths the panel snaps to, one per column of elements.
 *
 * Written as an attribute on <html> rather than an inline style on <body> for two reasons: an inline
 * style would beat the full width fallback in the media query at the end of this file, and the panel
 * watches the body class to know when the editor chrome moved - writing there would make it
 * re-measure itself every time the user dragged it.
 */
html[data-av-alb-cols="1"] body{
	--av-alb-sidebar-width: 125px;
}

html[data-av-alb-cols="2"] body{
	--av-alb-sidebar-width: 217px;
}

html[data-av-alb-cols="3"] body{
	--av-alb-sidebar-width: 309px;
}

html[data-av-alb-cols="4"] body{
	--av-alb-sidebar-width: 401px;
}

.avia-alb-panel-side{
	    --av-element-icon-size: 40px;
}

.avia-alb-panel-side #avia-sort-list-dropdown .avia-sort-list-select{
	border: none;
}

.avia-fixed-controls.avia-alb-panel-side{
	position: fixed;
	top: var(--av-alb-chrome-top);
	bottom: 0;
	/*
	 * Logical rather than left/right so the panel sits on the starting side of whichever direction
	 * the admin runs in. The right to left stylesheet is behind a filter a site can switch off, so
	 * the layout must not depend on it being loaded.
	 */
	inset-inline-start: var(--av-alb-chrome-start);
	inset-inline-end: auto;
	width: var(--av-alb-sidebar-width);
	margin: 0;
	padding: 0;
	z-index: 8000;

	/*
	 * Frosted rather than a solid slab, so the panel reads as an overlay on the editor instead of a
	 * second page chrome competing with the admin menu next to it.
	 *
	 * backdrop-filter is decoration only - the canvas is inset rather than running underneath, so
	 * there is little behind to blur. Browsers without it just get the translucent tint, which is the
	 * greater part of the effect anyway.
	 */
	background: rgba( 247, 248, 250, 0.82 );
	-webkit-backdrop-filter: saturate( 180% ) blur( 20px );
	backdrop-filter: saturate( 180% ) blur( 20px );
	border-inline-end: 1px solid rgba( 0, 0, 0, 0.07 );
	border-top: 1px solid rgba( 0, 0, 0, 0.07 );
	/* no horizontal offset: the shadow would fall on the wrong side in a right to left admin */
	box-shadow: 0 0 3px 0 rgba( 0, 0, 0, 0.03 );

	/* the point of the whole exercise: the panel scrolls on its own, the canvas keeps its place */
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;

	/*
	 * Hidden until it has been measured. The offsets are only known once the editor has finished
	 * drawing its chrome, and showing the panel before then means it appears in the wrong place and
	 * jumps. The room for it is reserved from the start, so nothing else shifts when it appears.
	 *
	 * visibility rather than display: it still has to be measurable while it waits.
	 */
	visibility: hidden;
	opacity: 0;
}

/*
 * The other half of the line above the panel, taken off.
 *
 * The block editor draws a border along the top of every metabox header, and on the builder that
 * one lands directly above the "Avia Layout Builder" title. It meets the panel's own top border at
 * the same height, so the two run together as a single rule across the width - darker on the
 * builder's side, because the editor's is a solid grey where the panel's is barely there.
 *
 * Only this metabox gives it up. Every other one keeps the border, where it is still doing the job
 * of separating one box from the next.
 */
#avia_builder .postbox-header{
	border-top: none;
}

.avia-fixed-controls.avia-alb-panel-side.avia-alb-panel-ready{
	visibility: visible;
	opacity: 1;
}

/*
 * Added a frame after the panel is revealed, never before: it should not slide in from wherever it
 * started. From then on the editor chrome changing - fullscreen, the admin menu folding - moves the
 * panel as a deliberate step instead of a jump.
 */
.avia-fixed-controls.avia-alb-panel-side.avia-alb-panel-animated{
	transition: opacity 0.15s ease-out, top 0.2s ease-in-out, inset-inline-start 0.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce){

	.avia-fixed-controls.avia-alb-panel-side.avia-alb-panel-ready,
	.avia-fixed-controls.avia-alb-panel-side.avia-alb-panel-animated{
		transition: none;
	}
}

/*
 * The grip that sets how wide the panel is - see avia-panel-resize.js.
 *
 * Fixed to the same edge the panel ends at rather than living inside it: the panel scrolls its
 * elements, and a handle within it would scroll away with them. Being its own fixed element also
 * keeps it clear of the panel's overflow, which would otherwise clip it.
 *
 * Wider than it looks. The line drawn on hover is one pixel, which is a miserable thing to aim at,
 * so the part that answers the pointer reaches a few pixels either side of it.
 */
.avia-alb-panel-resize{
	position: fixed;
	top: var(--av-alb-chrome-top);
	bottom: 0;
	inset-inline-start: calc( var(--av-alb-chrome-start) + var(--av-alb-sidebar-width) - 3px );
	width: 12px;
	z-index: 8001;
	cursor: col-resize;
	background: transparent;
	/* the pointer owns this element while dragging - without it a touch drag scrolls the page instead */
	touch-action: none;
}

.avia-alb-panel-resize::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: 3px;
	width: 3px;
	background: rgba( 0, 0, 0, 0.2 );
	opacity: 0;
	transition: opacity 0.12s ease;
}

.avia-alb-panel-resize:hover::before,
.avia-alb-panel-resize:focus-visible::before,
html.avia-alb-resizing .avia-alb-panel-resize::before{
	opacity: 1;
}

.avia-alb-panel-resize:focus-visible{
	outline: none;
}

/*
 * While dragging, the pointer is over the canvas as often as it is over the handle, and without this
 * the cursor flickers between the two and the drag selects whatever text it passes over.
 */
html.avia-alb-resizing,
html.avia-alb-resizing body{
	cursor: col-resize;
	-webkit-user-select: none;
	user-select: none;
}

/*
 * Reserve the column at the level of the editor's own content region, not on the builder metabox.
 *
 * Everything the editor puts above and around the builder lives inside these - the autosave notice,
 * admin notices, anything a plugin injects - so insetting the region means nothing can end up under
 * the panel, whoever added it. Insetting only the metabox would leave all of that overlapped.
 *
 * The two editors are kept apart on purpose: in the block editor the metabox sits in normal flow
 * inside the scrolling region, so insetting both would indent the builder twice.
 */
body.block-editor-page.avia-alb-sidebar-open .interface-interface-skeleton__content{
	padding-inline-start: var(--av-alb-sidebar-width);
	box-sizing: border-box;
}

body:not(.block-editor-page).avia-alb-sidebar-open #wpbody-content{
	padding-inline-start: var(--av-alb-sidebar-width);
	box-sizing: border-box;
}

/*
 * Fullscreen is a separate case: the metabox is lifted out and covers the viewport, so it is inset in
 * its own right and the panel moves into the corner with it (sync_chrome_offset zeroes the offsets).
 */
/*
 * The panel belongs to the Layout Builder, so it goes away with it when the user switches to the
 * default WordPress editor - and so does the room reserved for it, or the editor would keep an empty
 * gutter. The toolbar is inside the metabox and gets hidden along with it; the sidebar is attached to
 * <body>, so it has to be hidden here.
 *
 * These come after the rules above on purpose: they carry the same specificity, so being last is what
 * lets them win.
 */
body.wp-default-editor-enabled .avia-fixed-controls{
	display: none;
}

body.wp-default-editor-enabled.avia-alb-sidebar-open .interface-interface-skeleton__content,
body.wp-default-editor-enabled.avia-alb-sidebar-open #wpbody-content{
	padding-inline-start: 0;
}

/*
 * A column so the header row can be ordered above the tabs. The markup renders it last because in the
 * toolbar it is positioned absolutely into the corner; here it is a real row at the top of the panel.
 */
.avia-alb-panel-side .shortcode_button_wrap{
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	width: auto;
	float: none;
}

.avia-alb-panel-side .avia-alb-panel-row{
	order: -1;
}

/* --- header row: sorting and the keyboard shortcut help ------------------ */

.avia-alb-panel-side .avia-alb-panel-row{
	position: static;
	/*
	 * One line, always. The search field is the only thing here that can give, and it is set to - the
	 * two icons keep their size. Letting the row wrap instead would drop them onto a second line at
	 * the opposite end, and the sort menu hangs off the icon: it would open away from the panel and
	 * be clipped by it.
	 */
	flex-wrap: nowrap;
	align-items: center;
	padding: 8px 10px;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.06 );
	background: transparent;
}

/*
 * Search takes the room, and the two controls beside it are icons.
 *
 * The row used to spend its whole width on a dropdown reading "Sorting: Default" - a lot of space to
 * describe something most people set once, in a panel where the useful thing to do is find an element
 * among a hundred. Sorting keeps its menu, it just opens from an icon now.
 */
.avia-alb-panel-side .avia-alb-panel-row > .avia-alb-panel-filter{
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	height: 28px;
	margin: 0;
	padding: 0 8px;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 3px;
	background: #fff;
	font-size: 12px;
	line-height: 26px;
	color: #555;
	box-shadow: none;
}

.avia-alb-panel-side .avia-alb-panel-row > .avia-alb-panel-filter:focus{
	border-color: rgba( 0, 0, 0, 0.37 );
	outline: none;
	box-shadow: none;
}

/*
 * The clear button, drawn small but aimed at large.
 *
 * The browser's own is a few pixels across, which is a poor target for something people reach for the
 * moment they are done searching. Replacing it lets the two sizes be set apart: the element is the
 * full height of the field and wide enough to hit without looking, while the mask inside it stays the
 * size the mark wants to be. Only the part that answers the pointer grows.
 */
.avia-alb-panel-side .avia-alb-panel-row > .avia-alb-panel-filter::-webkit-search-cancel-button{
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	margin-inline-end: -7px;
	/*
	 * A background rather than the mask the rest of the builder's icons use: this pseudo element does
	 * not paint one, so the mark is drawn straight and softened with opacity instead of a colour.
	 */
	background: url( ../../icons/ui/close.svg ) center / 12px 12px no-repeat;
	opacity: 0.45;
	cursor: pointer;
}

.avia-alb-panel-side .avia-alb-panel-row > .avia-alb-panel-filter::-webkit-search-cancel-button:hover{
	opacity: 0.75;
}

.avia-alb-panel-side .avia-alb-panel-row > #avia-sort-list-dropdown{
	/*
	 * Last in the row on purpose, and the reason is worth keeping: the menu hangs from this icon's
	 * end edge, so that edge has to be the panel's own. Put anything after it and the menu is pushed
	 * inwards by that much - at the narrow panel widths it is nearly as wide as the panel, so it
	 * reaches back past the opposite edge and is cut off by the panel's overflow.
	 *
	 * The same overflow is what opens and closes it - the container clips the menu until it is
	 * hovered - so the menu cannot be moved out of the container's reach to escape the clipping
	 * either. It stays here, and everything else goes in front of it.
	 */
	order: 4;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	max-width: none;
	background: transparent;
}

.avia-alb-panel-side .avia-alb-panel-row > .avia-hotkey-info{
	order: 2;
	flex: 0 0 auto;
}

/* in front of the sorting icon, which has to keep the end of the row - see the note on it */
.avia-alb-panel-side .avia-alb-panel-row > .avia-alb-fullscreen{
	order: 3;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
}

/*
 * Narrow panel: the icons keep the first line and the search moves under them.
 *
 * A third icon is what makes this necessary - at one and two columns there is no longer a usable
 * field left beside them (26px and 84px of it), and a search box too small to read what was typed
 * into it is worse than one on a line of its own.
 *
 * Only the field wraps. Letting the row wrap freely would carry an icon down instead, and the
 * sorting menu hangs off its icon: from a second line it would open past the bottom of the row and
 * be clipped by the panel. Keyed to the panel width rather than measured, because the panel only
 * ever takes the four widths the drag handle snaps to.
 */
[data-av-alb-cols="1"] .avia-alb-panel-side .avia-alb-panel-row,
[data-av-alb-cols="2"] .avia-alb-panel-side .avia-alb-panel-row{
	flex-wrap: wrap;
	row-gap: 8px;
	/*
	 * The icons keep to the end of their line rather than the start, which is where they sit at the
	 * wider panel widths anyway - and it is what the sorting menu needs: it hangs from the end of the
	 * last icon, so that edge has to stay the panel's own or the menu reaches out of the panel.
	 */
	justify-content: flex-end;
}

[data-av-alb-cols="1"] .avia-alb-panel-side .avia-alb-panel-row > .avia-alb-panel-filter,
[data-av-alb-cols="2"] .avia-alb-panel-side .avia-alb-panel-row > .avia-alb-panel-filter{
	order: 9;
	flex: 1 1 100%;
}

/*
 * At the narrowest width the three icons want 92px of the 90px there are, and the last of them
 * wraps to a line of its own - a row of icons broken across two lines for the sake of two pixels.
 * They are drawn a little tighter here so they stay on one line with room to spare.
 */
[data-av-alb-cols="1"] .avia-alb-panel-side .avia-alb-panel-row{
	column-gap: 4px;
}

[data-av-alb-cols="1"] .avia-alb-panel-side .avia-alb-panel-row > #avia-sort-list-dropdown,
[data-av-alb-cols="1"] .avia-alb-panel-side .avia-alb-panel-row > .avia-alb-fullscreen{
	width: 24px;
	height: 24px;
}


/*
 * The trigger, reduced to its icon.
 *
 * The words beside it are bare text nodes inside the <strong>, and a text node cannot be selected -
 * so the only way to take them out is to zero the font size on the parent and give it back to the
 * icon. The label span inside collapses with them, which is what we want.
 */
.avia-alb-panel-side #avia-sort-list-dropdown .avia-sort-list-select{
	padding: 0;
	background: transparent;
	box-shadow: none;
	min-height: 0;
}

.avia-alb-panel-side #avia-sort-list-dropdown .avia-sort-list-wrap > strong{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 0;
	border-radius: 3px;
	cursor: pointer;
}

.avia-alb-panel-side #avia-sort-list-dropdown:hover .avia-sort-list-wrap > strong{
	background: rgba( 0, 0, 0, 0.06 );
}

/*
 * The glyph is the one icon in the panel still coming from the old icon font's arrow-combo, drawn as
 * an inline svg by the markup that both layouts share. Rather than change that markup and the toolbar
 * with it, the inline drawing is set aside here and the span wears a mask instead, exactly as every
 * other control in the builder does - so the sidebar gets the same Material sort mark as the rest.
 */
.avia-alb-panel-side #avia-sort-list-dropdown .avia-sort-list-wrap > strong > span.avia-font-entypo-fontello{
	position: relative;
	width: 16px;
	height: 16px;
	margin: 0;
	top: 0;
	--av-ui-glyph: url( ../../icons/ui/sort.svg );
	--av-ui-icon-size: 16px;
}

.avia-alb-panel-side #avia-sort-list-dropdown .avia-sort-list-wrap > strong > span.avia-font-entypo-fontello > svg{
	display: none;
}

/*
 * The label span is a sibling of the icon span, not a child of it, so anything aimed at "the span
 * inside the trigger" hits both and the glyph gets drawn twice. It is empty of use here - the
 * trigger is an icon - so it goes rather than merely being collapsed by the font size above.
 */
.avia-alb-panel-side #avia-sort-list-dropdown .avia-sort-list-wrap > strong > .avia-sort-list-label{
	display: none;
}

/*
 * With the trigger down to an icon the menu no longer has a box to hang under, so it is given one and
 * lifted out of the flow - in the row it would otherwise stretch the header as it opens. The panel
 * clips it until then, exactly as it did before: the container is overflow:hidden and turns visible
 * on hover, which is the whole open/close mechanism.
 */
.avia-alb-panel-side #avia-sort-list-dropdown .avia-sort-list-main{
	position: absolute;
	top: 100%;
	/*
	 * Hung from the end of the icon and grown inwards. The icon sits at the far edge of the row, and
	 * the panel clips anything wider than itself - so a menu anchored the other way would have its
	 * last 20px cut off. The width is held to the panel for the same reason: at one column there is
	 * less room than the menu would like, and wrapped labels beat invisible ones.
	 */
	inset-inline-end: 0;
	margin-top: 4px;
	min-width: min( 190px, calc( var(--av-alb-sidebar-width) - 36px ) );
	max-width: calc( var(--av-alb-sidebar-width) - 36px );
	background: #fff;
	border: 1px solid #e1e1e1;
	box-shadow: 0 5px 5px 0 rgba( 0, 0, 0, 0.2 );
	z-index: 30;
}

/*
 * Bridges the gap above the menu.
 *
 * The menu stays open by keeping its own container hovered, which works anywhere on the icon and
 * anywhere on the menu - but not in the few pixels of nothing between them, and that is the line
 * every pointer crosses on its way from one to the other. This covers those pixels and belongs to the
 * menu, so crossing them is still hovering it. The gap stays there to look at.
 */
.avia-alb-panel-side #avia-sort-list-dropdown .avia-sort-list-main::before{
	content: '';
	position: absolute;
	inset-inline: 0;
	top: -5px;
	height: 5px;
}

/*
 * While a search is running the sections stop being drawers and become the results themselves: every
 * one with a match is open, and the ones without are not there at all. A chevron would be inviting
 * the user to collapse a group the search just opened, so it goes - the click behind it is stopped in
 * avia-panel-search.js, and this is the half that says so.
 */
.avia-alb-panel-side.avia-alb-filtering .avia-tab-title-container a.avia-alb-tab::after,
.avia-alb-panel-side.avia-alb-filtering .avia-tab-title-container a.avia-custom-element-tab::after{
	display: none;
}

.avia-alb-panel-side.avia-alb-filtering .avia-tab-title-container a.avia-alb-tab,
.avia-alb-panel-side.avia-alb-filtering .avia-tab-title-container a.avia-custom-element-tab{
	cursor: default;
}

.avia-alb-panel-side .avia-alb-panel-no-results{
	margin: 0;
	padding: 16px 10px;
	color: #777;
	font-size: 12px;
	text-align: center;
}

/*
 * The close button is positioned absolutely by default and pinned by a rule that only reaches inside
 * the expanded metabox. The sidebar lives on <body>, outside that, so it has to be placed here or it
 * drops to the bottom of the scrolling panel and off screen.
 */
/*
 * The template button sits in the undo/redo bar (moved there by move_template_button). It keeps
 * position:relative so its dropdown still opens against the button rather than against the bar.
 *
 * The long selector is deliberate: the button is pinned into a corner with a bottom offset by both
 * the base and the block editor stylesheet, and those offsets have to be outranked here or the button
 * hangs out of the top of the bar.
 */
/*
 * The bar sets a z-index, which makes it a stacking context - so the dropdown inside it cannot rise
 * above anything in the layout that outranks the bar, and it ends up behind the elements on the
 * canvas. Raising the bar lifts the dropdown with it. Hover is included because the bar raises itself
 * on hover, which would otherwise re-cap the dropdown exactly while it is being used.
 */
body.avia-alb-sidebar-open .avia-controll-bar,
body.avia-alb-sidebar-open .avia-controll-bar:hover{
	z-index: 100;
}

body.avia-alb-sidebar-open .avia-controll-bar > .avia-template-save-button-container.avia-in-control-bar{
	position: relative;
	float: right;
	top: auto;
	bottom: auto;
	inset-inline: auto;
	margin: 0;
}

/*
 * float has no logical form that is safe to rely on yet, so the one case that needs it is turned
 * round here. Keyed off the dir attribute rather than a body class: WordPress always sets it, while
 * the rtl class the theme adds depends on a filter.
 */
html[dir="rtl"] body.avia-alb-sidebar-open .avia-controll-bar > .avia-template-save-button-container.avia-in-control-bar{
	float: left;
}

/* --- accordion: a heading per section, stacked ---------------------------
   The sections are moved to sit under their own heading by build_accordion().
   Opening one closes the others, which is the tab script's own behaviour. */

.avia-alb-panel-side .avia-tab-title-container{
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.06 );
}

.avia-alb-panel-side .avia-tab-title-container a.avia-alb-tab,
.avia-alb-panel-side .avia-tab-title-container a.avia-custom-element-tab{
	display: flex;
	align-items: center;
	justify-content: space-between;
	float: none;
	width: auto;
	margin: 0;
	padding: 14px;
	border: none;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.06 );
	background: transparent;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	color: #50575e;
	cursor: pointer;
}

/* open/closed chevron, drawn rather than shipped as an icon so it inherits the text colour */
.avia-alb-panel-side .avia-tab-title-container a.avia-alb-tab::after,
.avia-alb-panel-side .avia-tab-title-container a.avia-custom-element-tab::after{
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-inline-start: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transform-origin: center;
	opacity: 0.55;
	transition: transform 0.15s ease-in-out;
}

.avia-alb-panel-side .avia-tab-title-container a.avia-alb-tab:hover,
.avia-alb-panel-side .avia-tab-title-container a.avia-custom-element-tab:hover{
	background: rgba( 255, 255, 255, 0.6 );
	color: #135e96;
}

.avia-alb-panel-side .avia-tab-title-container a.active-tab{
	background: rgba( 255, 255, 255, 0.75 );
	border-bottom-color: transparent;
	color: #1d2327;
	font-weight: 600;
	border-radius: 0px;
}

.avia-alb-panel-side .avia-tab-title-container a.active-tab::after{
	transform: rotate(45deg);
	opacity: 0.9;
}

/* the open section reads as part of its heading rather than as a separate block */
.avia-alb-accordion .avia-tab-title-container > .avia-tab{
	background: rgba( 255, 255, 255, 0.5 );
	border-bottom: 1px solid rgba( 0, 0, 0, 0.05 );
}

/* --- the element buttons ------------------------------------------------ */

/*
 * The buttons keep the floated layout of the toolbar and simply wrap inside the narrower panel.
 * They deliberately are not a grid: the tab script toggles panels with an inline display:block,
 * which would override a display:grid here - and overriding that back with !important would also
 * defeat the display:none it uses to hide the other tabs.
 */
.avia-alb-panel-side .avia-tab{
	padding: 6px 4px 10px 10px;
	overflow: hidden;
}

.avia-alb-panel-side .avia-tab > a.shortcode_insert_button{
	width: 80px;
	height: 72px;
	margin: 0 6px 6px 0;
	padding: 6px 2px 12px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: #fff;
	transition: background-color .12s ease, border-color .12s ease;
}

.avia-alb-panel-side .avia-tab > a.shortcode_insert_button:hover{
	background: #fff;
	border-color: rgba( 0, 0, 0, 0.37 );
}

.avia-alb-panel-side .avia-tab > a.shortcode_insert_button:hover{
	border-color: rgba( 0, 0, 0, 0.37 );
	color:#333;
}

/* --- custom element buttons --------------------------------------------- */

/*
 * "Editing of custom elements is not allowed on fullscreen mode" belonged to the old fullscreen view,
 * where the panel was duplicated: the edit mode class landed on the original while the copy was the
 * one on screen, so the action buttons never appeared and editing was switched off instead. There is
 * only one panel now, editing works here, and the notice would only be confusing.
 *
 * It shows at all because the rule that normally hides it is scoped to #avia_builder, and the panel
 * sits outside that in this layout.
 */
.avia-alb-panel-side .av-custom-element-footer .av-custom-element-info{
	display: none;
}

/* Full width and stacked - the labels are too long to sit beside each other at this width. */
.avia-alb-panel-side .av-custom-element-footer{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
}

.avia-alb-panel-side .av-custom-element-button{
	display: block;
	float: none;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 5px 10px;
	box-sizing: border-box;
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
	white-space: normal;
}

.avia-alb-panel-side .av-custom-element-select-buttons{
	width: 100%;
	margin: 0;
	padding: 0;
}

/* --- narrow screens: fall back to a full width panel over the canvas ----- */

@media only screen and (max-width: 782px){

	/*
	 * Whatever width the user picked, it is overruled at this size - the panel lies over the canvas
	 * rather than beside it, so it takes the full width. The attribute selector has to be named again
	 * because it is the more specific one; the resize handle goes away with it.
	 */
	body,
	html[data-av-alb-cols] body{
		--av-alb-sidebar-width: 100%;
	}

	.avia-alb-panel-resize{
		display: none;
	}

	/*
	 * The sidebar width is a percentage down here, and the menu measures itself against a 28px icon -
	 * so the calc above would hold it to a few pixels. There is room for the full menu at this size.
	 */
	.avia-alb-panel-side #avia-sort-list-dropdown .avia-sort-list-main{
		min-width: 190px;
		max-width: none;
	}

	.avia-fixed-controls.avia-alb-panel-side{
		max-height: 45vh;
		bottom: auto;
		border-inline-end: none;
		border-bottom: 1px solid #dcdcde;
	}
}


/* ------------------------------------------------------------------------- */
/* Fullscreen in the classic editor                                           */
/* ------------------------------------------------------------------------- */

/*
 * The block editor has a fullscreen mode of its own and the button simply turns it on. The classic
 * editor has none, so this is it: the admin menu is folded, the two column layout becomes one, and
 * the builder is put at the top of it.
 *
 * That last part is the whole reason there are rules here rather than a class and nothing else.
 * WordPress writes the side column - Publish, Featured Image - into the markup before the main one,
 * so a single column layout on its own drops the builder underneath them, roughly six hundred
 * pixels down the page. Ordering the three children puts it back directly under the title and sends
 * the side boxes to the end, where they are out of the way but still reachable: this is a mode for
 * building a page, and publishing it should not require leaving.
 */
body.avia-alb-is-fullscreen #post-body.columns-1{
	display: flex;
	flex-direction: column;
}

body.avia-alb-is-fullscreen #post-body.columns-1 > #post-body-content{
	order: 1;
}

body.avia-alb-is-fullscreen #post-body.columns-1 > #postbox-container-2{
	order: 2;
}

body.avia-alb-is-fullscreen #post-body.columns-1 > #postbox-container-1{
	order: 3;
}
