/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

b, strong{
  font-weight:500;
}

@font-face {
  font-family: 'wyp-ed';
  src:
    url('icons/wyp-ed.ttf?jfoaz6') format('truetype'),
    url('icons/wyp-ed.woff?jfoaz6') format('woff'),
    url('icons/wyp-ed.svg?jfoaz6#wyp-ed') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.yicon {
  font-family: "wyp-ed";
  display: inline-block;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  speak: none;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 20px;
  height: 20px;
  font-size: 20px;
  vertical-align: top;
  text-align: center;
}

.icon-arrow-down:before { content: '\e801'; }
.icon-flag:before { content: '\e804'; }
.icon-controls-pause:before { content: '\e805'; }
.icon-plus:before { content: '\e806'; }
.icon-filter:before { content: '\e808'; }
.icon-admin-collapse:before { content: '\e809'; }
.icon-external:before { content: '\e80b'; }
.icon-yes:before { content: '\e80d'; }
.icon-no-alt:before { content: '\e80e'; }
.icon-desktop:before { content: '\e80f'; }
.icon-smartphone:before { content: '\e810'; }
.icon-editor-alignright:before { content: '\e811'; }
.icon-editor-aligncenter:before { content: '\e812'; }
.icon-editor-alignleft:before { content: '\e813'; }
.icon-editor-justify:before { content: '\e814'; }
.icon-visibility:before { content: '\e815'; }
.icon-hidden:before { content: '\e816'; }
.icon-menu:before { content: '\e818'; }
.icon-controls-play:before { content: '\e819'; }
.icon-trash:before { content: '\e81a'; }
.icon-warning:before { content: '\e81b'; }
.icon-arrow-up:before { content: '\e81c'; }

body *{
  outline:none;
}


/* ---------------------------------------------------- */
/* Yellow Alert                                         */
/* ---------------------------------------------------- */
.yellow-overlay{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:fixed;
	z-index:2147483646;
	background-color: rgba(0,0,0,0.6);
	transition: opacity 300ms ease;
	opacity:0;
}

.yellow-alert{
	top:50%;
	left:50%;
	position:fixed;
	z-index:2147483647;
	max-width:600px;
	min-width:460px;
	padding:30px;
	border-radius:8px;
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    background-color:#FFFFFF;
    text-align:center;
  box-shadow: 0 0 100px 0 rgba(255,255,255,0.2);
}

.yellow-alert h2{
	margin:0;
	padding:0;
	margin-bottom: 12px;

	font-weight: 400;
	line-height: 1.5;
	color:#333333;
}

.wyp-page-information-cant-be-retrieved .yellow-alert h2{
  margin-bottom:0px;
}

.yellow-alert p{
	margin:0;
	padding:0;
	margin-bottom: 12px;
	color:#555555;

	display: block;
	line-height: 1.6;
}

.yellow-alert a{
	color:#444444;
}

.yellow-alert input{
	display: block;
	margin: 0 auto;
	border: 1px solid #BBB;
	border-radius: 3px;
	padding: 10px 12px;
	font-size: 14px;
	color: #4e4e4e;
	width: 80%;
}

.yellow-alert input:focus{
	border-color:#0080ff;
}

.yellow-alert .button-container{
	margin-top:20px;
	display: flex;
	justify-content: center;
}

.yellow-alert .button-container span{
	padding: 12px 23px;
	font-size: 15px;
	font-weight: 500;
	border-radius: 4px;
	cursor: pointer;
	opacity: 0.92;
	display: inline-block;
	color: #ffffff;
	display: block;
	line-height: 1;
}

.yellow-alert .button-container span:hover{
	opacity:1;
}

.yellow-alert .button-container span.cancel{
	background-color: #767676;
	margin-right: 10px;
}

.yellow-alert .button-container span:not(.cancel){
	background-color: #419BF9;
}


/* ---------------------------------------------------- */
/* JQUERY CONTEXTMENU                                   */
/* ---------------------------------------------------- */
.context-menu-list {
  margin: 0;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0px 2px 10px 0 rgba(0,0,0,0.23) !important;
  transition: opacity 0.218s ease 0s;
  background: #FFF;
  cursor: default;
  font-size: 13px;
  outline: none;
  padding: 6px 0px;
  position: absolute;
  line-height: 16px;
  border-radius:8px;
}

.context-menu-list li > .context-menu-list {
  display: none;
  margin-top: -7px !important;
}

.context-menu-submenu.active > .context-menu-list,
.context-menu-submenu.hover > .context-menu-list {
  display: block;
}

.context-menu-item {
  padding-left: 16px;
  vertical-align: middle;
  padding-right: 44px;
  position: relative;
  color: #474747;
  list-style: none;
  margin: 0px;
  padding: 5px 8em 5px 16px;
  white-space: nowrap;
}

.context-menu-separator {
  border-top: 1px solid #EBEBEB;
  margin-top: 5px;
  margin-bottom: 4px;
  padding: 0px !important;
}

.context-menu-item.hover {
  background-color: #E8E8E8;
}

.context-menu-item.wyp-disable-contextmenu {
  color: #6c6c6c !important;
  pointer-events: none;
  background: #FFF !important;
  cursor: default !important;
}

.context-menu-item.wyp-disable-contextmenu,
.context-menu-item.wyp-disable-contextmenu span {
  cursor: default !important;
}

.context-menu-list {
  z-index: 2147483646 !important;
  max-width: 170px !important;
  width: 170px !important;
}

.context-menu-item.wyp-active-contextmenu {
  background: rgba(21, 146, 230, 0.15) !important;
}

.wyp-contextmenu-pseudo-classes .context-menu-item.wyp-active-contextmenu{
  background:rgba(98, 158, 76, 0.25) !important;
}

body.wyp-fix-leftbar:not(.wyp-res-mod):not(.wyp-crnt-el-menu) .context-menu-root {
    margin-left: 42px;
}





/* ---------------------------------------------------- */
/* UISLIDER                                             */
/* ---------------------------------------------------- */
.sl-d{
  height:15px;
  position:relative;
}

.sl-d:after{
  width:100%;
  display:block;
  background: #E4E4E4;
  height: 2px;
  content: "";
  position:relative;
  top:-10px;
  border-radius: 10px;
}

.sl-cu{
  background-color: #828282;
  position: absolute;
  top: 4px;
  height: 2px;
  width: 0px;
  z-index: 10;
  left: 0;
  border-radius: 10px;
  transition:background-color 200ms ease;
}

.sl-d .ui-slider-handle{
  width: 14px;
  height: 14px;
  margin-left: -6px;
  top: -2px;
  border-radius: 9999px;
  z-index: 10;
  position:relative;
  background: #fff;
  cursor: pointer;
  border: 2px solid #828282;
  display:block;
  transition:border-color 200ms ease,border-width 100ms linear, background-color 200ms linear;
  box-shadow: 0 0 0 3px #f5f5f5;
}

.sl-o:hover .ui-slider-handle{
  box-shadow: 0 0 0 3px #F0F0F0;
}

.sl-o .ui-slider-handle.ui-state-active{
  border-width: 7px;
  background-color:#666666;
}

.sl-d:hover .sl-cu{
  background-color:#666666;
}

.sl-d:hover .ui-slider-handle{
  border-color:#666666;
}

.sl-d{
  width: ms-calc(100% - 98px);
  width: calc(100% - 98px);
  float:left;
  margin-top: 4px !important;
  margin-left: 2px !important;
}

.sl-o .wyp-after{
  display:inline-block !important;
  float:right;
}

.sl-o .wyp-after input{
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}




/* ---------------------------------------------------- */
/* IRIS COLORPICKER                                     */
/* ---------------------------------------------------- */
.iris-picker{
  width: 224px;
  z-index: 1000;
  display: inline-block;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0px 2px 10px 0 rgba(0,0,0,0.23);
}

input + .iris-picker {
  margin-left:16px;
    margin-top: 34px;
  position: fixed;
}

.iris-picker {
  position: relative;
  background: #FFF;
}
.iris-picker:after, .iris-picker:before {
  bottom: 100%;
  left: 25px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.iris-picker:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #FFF;
  border-width: 6px;
  margin-left: -6px;
}
.iris-picker:before {
  border-color: rgba(0, 0, 0, 0);
  border-bottom-color: rgba(0,0,0,0.2);
  border-width: 7px;
  margin-left: -7px;
}

.iris-square{
  position: relative;
  width: 100% !important;
  height:120px !important;
  border-radius: 8px 8px 0 0;
  overflow:hidden;
}

.iris-square-inner{
  height:100%;
}

.iris-square-vert{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.iris-slider-offset{
  height: 10px;
  width: 100%;
  border-radius: 3px;
  position:relative;
}

.cs-alpha-slider{
  height:10px;
  width:100%;
  position: relative;
}

.iris-picker .cs-alpha-slider-offset {
  height: 10px;
  width: 100%;
  border-radius:3px;
  margin-top: -10px;
}

.iris-color-preview{
width: 24px;
height: 24px;
background: #f0f0f0;
border-radius: 2px;
overflow: hidden;
border: 1px solid #bbb;
}

.iris-picker .iris-controls{
  padding: 15px 12px 12px 12px;
  display: flex;
  justify-content: space-between;
  pointer-events:none;
}

.iris-sliders{
  width:80%;
}

.iris-picker .iris-strip{
  margin-bottom: 8px;
  border-radius: 3px;
  pointer-events: auto;
}

.cs-alpha-wrap{
  pointer-events: auto;
  border-radius: 3px;
}

.cs-alpha-slider .ui-slider-handle, .iris-picker .iris-strip .ui-slider-handle {
  position: absolute;
  z-index: 5;
  background-color: #FFF;
  border: 2px solid #fff;
  box-shadow:0 0 2px 1px rgba(0,0,0,0.4);
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  -webkit-transform: none;
          transform: none;
  overflow: hidden;
  left: 50%;
  border-radius:30px;
  margin-left: -5px;
}

.iris-picker .iris-square-handle {
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0px 1px rgba(0,0,0,0.20), 0 0 0px 1px rgba(0,0,0,0.20) inset;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  left: -6px;
  top: -6px;
  z-index: 10;
}

.iris-picker .information{
  position:relative;
  padding:3px 12px 0px 9px;
  display:flex;
  justify-content: space-between;
  border-bottom: 1px solid #E3E3E3;
}

.iris-picker .iris-color-list{
  padding:4px 12px 3px 12px;
  display: flex;
  flex-wrap: wrap;
}

.iris-picker .colors-changer span{
  display:none;
}

.iris-picker .iris-color-control.flat .flat,.iris-picker .iris-color-control.meterial .meterial,.iris-picker .iris-color-control.soft .soft,.iris-picker .iris-color-control.page .page{
  display:inline-block;
}

.iris-picker .iris-color-list .iris-color{
  display:none;
  width: 13px;
  height: 13px;
  border-radius: 2px;
  margin-right: 9px;
  margin-bottom: 9px;
  position: relative;
  background-size: contain;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}

.iris-picker .colors-changer{
  font-size: 10px;
padding: 12px 12px 2px 10px;
color: #626262;
text-transform: uppercase;
font-weight: 500;
display:flex;
justify-content: space-between;
}

.iris-picker .iris-color-list .iris-color:hover{
  -webkit-transform:scale(1.4);
          transform:scale(1.4);
}

.iris-picker .information-change{
display: block;
width: 10px;
top: 0;
right: 0;
bottom: 0;
text-align: center;
box-sizing: border-box;
padding-top: 14px;
}

.iris-picker .information-change button,.iris-picker .colors-changer button{
  text-align:center;
  position: relative;
width: 10px;
height: 12px;
padding: 0;
box-sizing: border-box;
background: transparent;
border: 0;
cursor: pointer;
outline: none;
}

.iris-picker .colors-changer button{
  margin-left:10px;
}

.iris-picker .arrow-button:hover{
  background-color:#f1f1f1;
  border-radius:3px;
}

.iris-picker .arrow-button:after,.iris-picker .arrow-button:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    width: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    pointer-events: none;
    margin: 2px;
    box-sizing: border-box;
}

.iris-picker .arrow-button:before {
  top: 0;
height: 50%;
height: 0;
border-bottom: 3px solid #000;
}

.iris-picker .arrow-button:after {
bottom: 0;
top: 50%;
height: 0;
border-top: 3px solid #000;
}

.iris-picker .information-item{
      display: none;
    position: relative;
    box-sizing: border-box;
    width:calc(100% - 24px);
}

.iris-picker .information.rgb .information-item.rgb{
  display:flex;
}

.iris-picker .information.hex .information-item.hex{
  display:block;
}

.iris-picker .information > .information-item > .input-field{
display: block;
flex: 1;
padding: 3px;
box-sizing: border-box;
position: relative;
}

.iris-picker .information .information-item .input-field input{
  text-align: center;
width: 100%;
padding: 3px;
height: 21px;
font-size: 11px;
color: #333;
box-sizing: border-box;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
border: 1px solid #cbcbcb;
border-radius: 2px;
}

.iris-picker .information .information-item .input-field .title{
  text-align: center;
font-size: 12px;
color: #a9a9a9;
padding-top: 2px;
}

.iris-picker .information .information-item .input-field.hex .title{
color: #999999;
}

.iris-picker .iris-slider.iris-strip{
    background-image:linear-gradient(to right, rgb(255, 0, 0), rgb(255, 0, 255), rgb(0, 0, 255), rgb(0, 255, 255), rgb(0, 255, 0), rgb(255, 255, 0), rgb(255, 0, 0));
}


/* ---------------------------------------------------- */
/* BOOTSTRAP TOOLTIP                                    */
/* ---------------------------------------------------- */
.tooltip {
  position: absolute;
  z-index: 2147483648;
  display: block;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  font-size: 12px !important;
  opacity: 0;
  filter: alpha(opacity=0);
  pointer-events: none;
}

.tooltip.in {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

.tooltip.top {
  margin-top: -3px;
  padding: 5px 0;
}

.tooltip.right {
  margin-left: 3px;
  padding: 0 5px;
}

.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}

.tooltip.left {
  margin-left: -3px;
  padding: 0 5px;
}

.tooltip-inner {
  max-width: 200px;
  padding: 6px 8px !important;
  color: rgba(255, 255, 255, 0.90);
  background-color: #666666;
  border-radius: 4px;
  text-align: left !important;
  pointer-events: none;
}

.tooltip.right .tooltip-inner{
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px 2px 10px 0 rgba(0,0,0,0.23);
}

.tooltip.left .tooltip-inner{
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23);
}

.tooltip.top .tooltip-inner{
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px -2px 10px 0 rgba(0,0,0,0.23);
}

.tooltip.bottom .tooltip-inner{
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px 2px 10px 0 rgba(0,0,0,0.23);
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #666666;
}

.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  right: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #666666;
}

.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #666666;
}

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #666666;
}

.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #666666;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #666666;
}

.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #666666;
}

.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #666666;
}


/* Animation manager tooltip */
.wyp-animate-manager .tooltip.in {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

.wyp-animate-manager .tooltip,
.anim-bar .tooltip {
  font-size: 12px !important;
}

.wyp-animate-manager .tooltip-inner,
.anim-bar .tooltip-inner {
  max-width: 300px;
  padding: 5px 8px !important;
}

.anim-bar .tooltip.in {
  opacity: 1 !important;
}

.anim-bar .tooltip-inner {
  background-color: #555 !important;
}

.anim-bar .tooltip.top .tooltip-arrow {
  border-top-color: #555 !important;
}


/* Advanced information box tooltip */
.advanced-info-box-inner .tooltip {
  font-size: 12px !important;
}

.advanced-info-box-inner .tooltip-inner {
  max-width: 200px;
  padding: 6px 8px !important;
}

.advanced-info-box-inner .tooltip.in {
  opacity: 1 !important;
}

.advanced-info-box-inner .tooltip-inner {
  background-color: #444 !important;
}

.advanced-info-box-inner .tooltip.top .tooltip-arrow {
  border-top-color: #444 !important;
}


/* css editor tab tooltip */
#cssEditorBar .tooltip {
  font-size: 11px !important;
}

#cssEditorBar .tooltip-inner {
  max-width: 300px;
  padding: 4px 6px !important;
  margin-left:0;
  margin-right:10px;
}

#cssEditorBar .tooltip.in {
  opacity: 1 !important;
}

#cssEditorBar .tooltip-inner {
  background-color: #545454 !important;
  color: #c9c9c9 !important;
}

#cssEditorBar .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #545454 !important;
}


/* Select box tooltip */
.ed-pnl .tooltip-inner {
  font-size: 12px !important;
}


/* Customizing type tooltip */
#c-t-list .tooltip {
  font-size: 12px !important;
}

#c-t-list .tooltip-inner {
  padding: 8px 10px !important;
}


/* small tooltip */
.tooltip.small-tooltip .tooltip-inner {
  font-size: 11px !important;
  padding: 5px 8px 5px 8px !important;
}

.tooltip.small-tooltip.tooltip-responsive-icon .tooltip-inner{
  text-align:center !important;
  padding:5px !important;
}

.tooltip.property-help-tooltip .tooltip-inner{
  text-align:center !important;
  padding:6px !important;
}

.ed-pnl span.op-l span{
  transition-property: color;
  transition-duration: 0ms;
  transition-timing-function: linear;
  transition-delay: 50ms;
}

.ed-pnl .op-g:not(.reset-enable) span.op-l span:hover{
  color:rgb(11, 133, 215) !important;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2147483648;
  display: none;
  max-width: 250px;
  padding: 0;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.42857143 !important;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  font-size: 14px;
  background-clip: padding-box;
  border-radius:8px;
}

.popover.right .tooltip-inner{
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px 2px 10px 0 rgba(0,0,0,0.23);
}

.popover.left .tooltip-inner{
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23);
}

.popover.top .tooltip-inner{
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px -2px 10px 0 rgba(0,0,0,0.23);
}

.popover.bottom .tooltip-inner{
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px 2px 10px 0 rgba(0,0,0,0.23);
}

.popover.top {
  margin-top: -10px;
}

.popover.right {
  margin-left: 10px;
}

.popover.bottom {
  margin-top: 10px;
}

.popover.left {
  margin-left: -10px;
}

.popover-title {
  margin: 0;
  padding: 8px 10px !important;
  font-size: 12px;
  background-color: #585858;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500 !important;
  border-radius: 8px 8px 0px 0px;
}

.popover-content {
  border-top-width: 0px;
  padding: 8px 10px !important;
  color: #555;
  font-size: 12px;
  line-height: 1.5 !important;
  border-radius: 0px 0px 8px 8px !important;
  background-color: #FFF;
}

.popover>.arrow,
.popover>.arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.popover>.arrow {
  border-width: 9px;
}

.popover>.arrow:after {
  border-width: 7px;
  content: "";
}

.popover.top>.arrow {
  left: 50%;
  margin-left: -9px;
  border-bottom-width: 0;
  border-top-color: #FFF;
  bottom: -9px;
}

.popover.top>.arrow:after {
  content: " ";
  bottom: 1px;
  margin-left: -7px;
  border-bottom-width: 0;
  border-top-color: #FFF;
}

.popover.right>.arrow {
  top: 50%;
  left: -9px;
  margin-top: -9px;
  border-left-width: 0;
  border-right-color: #FFF;
}

.popover.right>.arrow:after {
  content: " ";
  left: 1px;
  bottom: -7px;
  border-left-width: 0;
  border-right-color: #FFF;
}

.popover.bottom>.arrow {
  left: 50%;
  margin-left: -9px;
  border-top-width: 0;
  border-bottom-color: #FFF;
  top: -9px;
}

.popover.bottom>.arrow:after {
  content: " ";
  top: 1px;
  margin-left: -7px;
  border-top-width: 0;
  border-bottom-color: #FFF;
}

.popover.left>.arrow {
  top: 50%;
  right: -9px;
  margin-top: -9px;
  border-right-width: 0;
  border-left-color: #FFF;
}

.popover.left>.arrow:after {
  content: " ";
  right: 1px;
  border-right-width: 0;
  border-left-color: #FFF;
  bottom: -7px;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.invisible {
  visibility: hidden;
}

.hidden {
  display: none !important;
}




/* ---------------------------------------------------- */
/* YELLOW PENCIL CSS                                    */
/* ---------------------------------------------------- */
body,html {
    overflow: hidden;
    background: #888888;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

body,html, input,select,textarea,button,#vsl-css-vi .tooltip-inner,.view-information,#view-no-item{
  font-family:'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#vsl-css-vi,.css-rule-view input.value-input,.ace_editor {
  font-family: 'Roboto Mono', monospace !important;
}

/* smooth page changing, f1f1f1 is loading bg color */
body:not(.yellow-pencil-ready){
    background-color: #F1F1F1;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

* {
    box-sizing: border-box;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.ace_editor.ace_autocomplete {
    z-index: 999999999 !important;
}

.yellow_pencil_iframe { /* for left bar */
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    border-width: 0;
    z-index: 99;
    background: #FFF;
}

.ed-pnl,.editor-leftbar {
    display: none !important;
}

body.yellow-pencil-ready .ed-pnl,body.yellow-pencil-ready .editor-leftbar {
    display: block !important;
}

.wyp-background-asts {
    background-color: #F9F9F9;
    border: 1px solid #C8C8C8;
    border-radius: 3px;
    height: 271px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-top: 6px !important;
    line-height: 0 !important;
    display: none;
    font-size: 0 !important;
    width: 100% !important;
    box-shadow: 0 5px 3px -3px rgba(0, 0, 0, 0.14);
    position: relative;
}

.wyp-background-asts .wyp-bg-ast {
    outline: none !important;
    width: 25% !important;
    height: 68px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-repeat: repeat !important;
    display: block !important;
    cursor: pointer !important;
    min-height: 68px !important;
    max-height: 68px !important;
    min-width: 25% !important;
    max-width: 25% !important;
    float: left;
    border: 1px solid #CCC !important;
    border-bottom-width: 0px !important;
}

.wyp-background-asts .wyp-bg-ast:nth-child(odd) {
    border-left-width: 0px !important;
    border-right-width: 0px !important;
}

.wyp-background-asts .wyp-bg-ast:nth-child(1),.wyp-background-asts .wyp-bg-ast:nth-child(2),.wyp-background-asts .wyp-bg-ast:nth-child(3),.wyp-background-asts .wyp-bg-ast:nth-child(4){
    border-top-width:0px !important;
}

.wyp-background-asts .wyp-bg-ast.active {
    box-shadow: inset 0 0 0 2px #0080FF !important;
}

.context-menu-root.no-top-radius{
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
}

.context-menu-root li span::-moz-selection,.wyp-selected-tooltip::-moz-selection,.wyp-selected-tooltip small::-moz-selection,.ed-pnl::-moz-selection,.ed-pnl :not(input):not(textarea)::-moz-selection {
    background: transparent !important;
    color: inherit !important;
}

.context-menu-root li span::-moz-selection, .wyp-selected-tooltip::-moz-selection, .wyp-selected-tooltip small::-moz-selection, .ed-pnl::-moz-selection, .ed-pnl :not(input):not(textarea)::-moz-selection {
    background: transparent !important;
    color: inherit !important;
}

.context-menu-root li span::selection,.wyp-selected-tooltip::selection,.wyp-selected-tooltip small::selection,.ed-pnl::selection,.ed-pnl :not(input):not(textarea)::selection {
    background: transparent !important;
    color: inherit !important;
}

.context-menu-root li span::-moz-selection,.wyp-selected-tooltip::-moz-selection,.wyp-selected-tooltip small::-moz-selection,.ed-pnl::-moz-selection,.ed-pnl :not(input):not(textarea)::-moz-selection {
    background: transparent !important;
    color: inherit !important;
}


/* ---------------------------------------------------- */
/* Basic Styles                                         */
/* ---------------------------------------------------- */
.wyp-clear {
    clear: both !important;
}


/* ---------------------------------------------------- */
/* Left Area Styles                                     */
/* ---------------------------------------------------- */
.ed-pnl {
    position: fixed !important;
    right: 10px;
    margin-right: 13px;
    top: 14px;
    z-index: 100046;
    display: block;
    width: 276px;
    height:auto !important;
    background: #f5f5f5;
    font-size: 13px !important;
    color: #595959 !important;
    line-height: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23) !important;
    border-radius:8px !important;
}

.wyp-res-mod .ed-pnl, .wyp-res-mod:not(.wyp-fix-leftbar) .editor-leftbar{
    margin-top: 20px !important;
}

.wyp-fix-pan .ed-pnl{
    transition: none;
    box-shadow: 0 0 0px 1px rgba(0,0,0,0.17), 0 0 4px 1px rgba(0,0,0,0.2) !important;
}

.wyp-fix-pan .ed-pnl .ui-resizable-handle.ui-resizable-e{
    display:none !important;
}

.ed-pnl.ui-draggable-dragging *{
    pointer-events:none;
}

.wqminicolors-panel {
    z-index: 100047;
}

.ed-pnl input {
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* Fixed Editor panel style */
.wyp-fix-pan:not(.wyp-animate-manager-active):not(.wyp-cln-lo-manual):not(.wyp-cln-lo-panel-only) .ed-pnl{
    height:100% !important;
    top:0px !important;
    right:0px !important;
    bottom:auto !important;
    left:auto !important;
    margin:0px !important;
    border-radius:0px !important;
    background-color:#E5E5E5;
}

.wyp-fix-pan:not(.wyp-cln-lo-manual):not(.wyp-cln-lo-panel-only) .ed-pnl-top, .wyp-fix-pan:not(.wyp-cln-lo-manual):not(.wyp-cln-lo-panel-only) .ed-pnl-top *{
    border-radius:0px !important;
}

/* Reset theme styles for left area */
.ed-pnl ul:before,.ed-pnl li:before,.ed-pnl a:before,.ed-pnl ul:after,.ed-pnl li:after,.ed-pnl a:after {
    display: none !important;
    visibility: hidden !important;
}

.ed-pnl ul,.ed-pnl li,.ed-pnl h3 {
    text-align: left !important;
    text-transform: none !important;
}

.ed-pnl * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.ed-pnl .ed-pnl-top {
    position: absolute;
    left: 0;
    right: 0;
    height: 45px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    background: #515151;
    cursor: move !important;
    border-radius: 8px 8px 0 0;
}

.ed-pnl .ed-pnl-top{
    cursor: move !important;
}

body.wyp-fix-pan:not(.wyp-cln-lo-manual):not(.wyp-cln-lo-panel-only) .ed-pnl{
    background-color:#f5f5f5 !important;
}

body.wyp-fix-pan:not(.wyp-cln-lo-manual):not(.wyp-con-slcd):not(.wyp-cln-lo-panel-only) .ed-pnl{
    background-color:#f5f5f5 !important;
}

.ed-pnl .ed-pnl-top .wyp-button{
    border-radius:0px 8px 0 0;
    float: right !important;
    margin-top: 0 !important;
    background: rgba(129,164,87,.95);
    color: rgba(255,255,255,0.95) !important;
    height: 45px;
    width: 80px;
    position: relative;
    left: 15px;
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    cursor: pointer !important;
    line-height:45px;

    transition: background 150ms ease;
}

.ed-pnl .ed-pnl-top .wyp-button.wyp-disabled{
    cursor: default !important;
}

.ed-pnl .ed-pnl-top .wyp-button:not(.wyp-disabled):hover{
    background:#7C9D53;
}

.wyp-disabled {
    opacity: .85 !important;
}

.ed-pnl .ed-pnl-top .wyp-button-manage {
    float: right !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 80 80' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m40 43c1.65 0 3-1.35 3-3v-33c0-1.65-1.35-3-3-3s-3 1.35-3 3v33c0 1.65 1.35 3 3 3zm0 6c-5.8 0-10.5 4.7-10.5 10.5 0 4.756 3.164 8.769 7.5 10.06v3.44c0 1.65 1.35 3 3 3s3-1.35 3-3v-3.44c4.336-1.291 7.5-5.303 7.5-10.06 0-5.8-4.7-10.5-10.5-10.5zm28.5-39c1.65 0 3-1.35 3-3s-1.35-3-3-3-3 1.35-3 3 1.35 3 3 3zm0 6c-5.8 0-10.5 4.7-10.5 10.5 0 4.756 3.164 8.769 7.5 10.06v36.44c0 1.65 1.35 3 3 3s3-1.35 3-3v-36.44c4.336-1.292 7.5-5.303 7.5-10.06 0-5.8-4.701-10.5-10.5-10.5zm-57 3c1.65 0 3-1.35 3-3v-9c0-1.65-1.35-3-3-3s-3 1.35-3 3v9c0 1.65 1.35 3 3 3zm0 6c-5.8 0-10.5 4.7-10.5 10.5 0 4.756 3.164 8.769 7.5 10.06v27.44c0 1.65 1.35 3 3 3s3-1.35 3-3v-27.44c4.336-1.292 7.5-5.303 7.5-10.06 0-5.8-4.701-10.5-10.5-10.5z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
    width: 46px;
    height: 45px;
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    margin-right: -15px;
    opacity:0.77;
    background-size:20px;
    transition: opacity 100ms ease;
}

.ed-pnl .ed-pnl-top .wyp-button-manage:hover{
    opacity:0.87;
}

.wyp-button-live {
    float: right !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.995' height='29.987' viewBox='0 0 29.995 29.987'%3E%3Cpath d='M14.524,35H33.44a1.543,1.543,0,0,0,1.54-1.54V14.546a1.542,1.542,0,0,0-1.54-1.539H26.982V6.55a1.542,1.542,0,0,0-1.54-1.539H6.525A1.542,1.542,0,0,0,4.985,6.55V25.462A1.542,1.542,0,0,0,6.525,27h6.458v6.457A1.544,1.544,0,0,0,14.524,35ZM7.985,24V8.009h16V24Zm8,3h9.458a1.542,1.542,0,0,0,1.54-1.539V16.006h5V32h-16Z' transform='translate(-4.985 -5.011)' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 19px;
    width: 46px;
    height: 45px;
    display: inline-block;
    background-position: center center;
    border-right: 1px solid #404040;
    background-repeat: no-repeat;
    opacity:0.64;
    transition: opacity 100ms ease;
}

.wyp-button-live.live-btn-loading{
    background-size:25px;
}

.wyp-button-live.live-btn-loading{
    background-image: url("data:image/svg+xml,%3Csvg width='200px' height='200px' display='block' shape-rendering='auto' style='background:rgba(0, 0, 0, 0) none repeat scroll 0%25 0%25;margin:auto' preserveAspectRatio='xMidYMid' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='%2370a7ff' stroke-dasharray='164.93361431346415 56.97787143782138' stroke-width='10'%3E%3CanimateTransform attributeName='transform' dur='1s' keyTimes='0;1' repeatCount='indefinite' type='rotate' values='0 50 50;360 50 50'/%3E%3C/circle%3E%3C/svg%3E");
}

.wyp-gradient-list,.wyp-unsplash-list:empty,#wyp-customizing-type-frame{
  background-image: url("data:image/svg+xml,%3Csvg width='200px' height='200px' display='block' shape-rendering='auto' style='background:rgba(0, 0, 0, 0) none repeat scroll 0%25 0%25;margin:auto' preserveAspectRatio='xMidYMid' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='%235294ff' stroke-dasharray='164.93361431346415 56.97787143782138' stroke-width='10'%3E%3CanimateTransform attributeName='transform' dur='1s' keyTimes='0;1' repeatCount='indefinite' type='rotate' values='0 50 50;360 50 50'/%3E%3C/circle%3E%3C/svg%3E");
}

.wyp-button-live:hover{
    opacity:0.74;
}

.ed-pnl-inner{
    overflow: hidden;
    margin-top:45px;
    min-height:276px;
}

.ed-pnl .ed-pnl-list {
    margin: 0;
    padding: 0;
    width: 100%;
    position:relative;
}

.ed-pnl-list.list-active{
  background-color:#f8f8f8;
  overflow-y: auto;
}

.wyp-con-slcd .ed-pnl .wyp-panel-no-selection {
    display: none;
}

body:not(.wyp-con-slcd) .ed-pnl .ed-pnl-list {
    display: none;
}

.ed-pnl .wyp-panel-no-selection {
    width: 100%;
    color:#464646 !important;
    background-color:#FAFAFA;
}

.wyp-fix-pan .wyp-panel-no-selection{
  height:calc(100vh - 70px - 45px); /* 28px parent, 70px customizing area, 45px top bar */
}

.ed-pnl .wyp-panel-no-selection .starter-notice{
    padding: 48px 40px;
    font-size: 14px !important;
    text-align: center !important;
    line-height: 23px !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    color: #636363 !important;

}

body.customization-type-popup-3 .ed-pnl .wyp-panel-no-selection .starter-notice{
    padding-top: 51px;
    padding-bottom: 51px;
}

.ed-pnl .wyp-hand {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13.124 0v4h1V0h-1zm6.402 2.577l-3.11 2.517.63.777 3.11-2.517-.63-.777zm2.005 6.736l-3.898-.9-.225.974 3.898.9.225-.974zm-15.6.974l3.898-.9-.225-.974-3.897.9.225.974zm1.15-6.933L10.2 5.87l.63-.777-3.11-2.517-.63.777zM19.623 31c4.143 0 7.5-3.585 7.5-7.5h0v-5.998c0-.83-.666-1.502-1.5-1.502a1.5 1.5 0 0 0-1.5 1.502V18h-1v-2.494a1.5 1.5 0 1 0-3 0V17h-1v-2.494a1.5 1.5 0 1 0-3 0V18h-1V7.505a1.5 1.5 0 1 0-3 0V18.8c-2.058-2.2-4.768-4.62-5.88-3.504C5.158 16.39 7.96 19.4 11.872 25.983 13.634 28.95 15.865 31 19.623 31zm8.5-7.5a8.5 8.5 0 0 1-8.5 8.5c-3.113 0-6.398-1.453-8.66-5.572-3.264-5.946-7.437-9.845-5.45-11.832 1.422-1.422 3.654-.058 5.61 1.77V7.51A2.5 2.5 0 0 1 13.624 5c1.4 0 2.5 1.123 2.5 2.508v5c.418-.313.937-.498 1.5-.498 1.082 0 1.995.677 2.346 1.628A2.49 2.49 0 0 1 21.624 13c1.4 0 2.5 1.118 2.5 2.498v.013c.418-.313.937-.497 1.5-.497 1.4 0 2.5 1.12 2.5 2.5V23.5z' fill='%23919191'/%3E%3C/svg%3E");
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size:100%;
}

.wyp-hand-after{
    margin-top:10px;
}

.wyp-con-slcd .ed-pnl .wyp-panel-no-selection {
    display: none;
}

.ed-pnl .ed-pnl-list > li > h3 {
    border-bottom: 1px solid #e8e8e8 !important;
    background-color:#fafafa;
    color: #383838 !important;
    margin: 0 !important;
    padding: 12px !important;
    letter-spacing: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    position: relative !important;
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 14px auto;
    padding-left: 39px !important;
}

.ed-pnl .ed-pnl-list > li > h3:before {
    font-family: "wyp-ed";
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    text-rendering: auto;
    font-size: 18px;
    text-align: center;
    content: '\e801';
    position:absolute;
    right:12px;
    margin-top:-1px;
    opacity: .36;
    content: '\e801';
}

.ed-pnl-list > li > h3:after{
  content: " ";
  display: block;
  opacity:0;
  transition: opacity 150ms;
}

.ed-pnl-list > li > h3.wyp-group-edited:after{
  opacity:1;
  position: absolute;
  right: 39px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
  background-color: rgba(21, 146, 230, 0.7);
  border-radius: 30px;
    }

.ed-pnl .ed-pnl-list,.ed-pnl .ed-pnl-list > li {
    list-style-type: none !important;
}

.ed-pnl .ed-pnl-list > li:not(.active) h3:hover {
    color: #262626 !important;
    background-color: #ededed;
}

.ed-pnl .ed-pnl-list > li:not(.active):not(.extra-option) h3:hover {
    border-bottom: 1px solid #e1e1e1 !important;
    box-shadow: 0px -1px 0px 0px #e1e1e1 !important;
}

.ed-pnl-list > li.active > h3{
    color: #545454 !important;
    background-color: #e9e9e9;
    border-bottom: 1px solid #d2d2d2 !important;
    font-weight: 500 !important;
    position: sticky !important;
    top: 0px;
    z-index: 2147483646;
}

.ed-pnl-list > li.active > h3:before{
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  opacity: 0.46;
}

.ed-pnl .wyp-t-cont {
    display: none;
    padding: 0;
    overflow-y: auto;
}

.ed-pnl .ed-pnl-list > li.active .wyp-t-cont {
    border-bottom-width: 0 !important;
    border-radius: 0 0 8px 8px;
}

.ed-pnl .ed-pnl-list > li.disabled {
  display:none !important;
}

.ed-pnl a {
    text-decoration: none !important;
    position: static;
}

.ed-pnl .wyp-save-btn {
    position: relative !important;
    border-radius: 0 3px 0 0;
}

.ed-pnl .op-l {
    display: block !important;
    padding-bottom: 2px !important;
    font-weight: 400 !important;
    display: block !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    font-size: 13px !important;
    position: relative !important;
    white-space: nowrap !important;
}

/* input hovers */
.ed-pnl .op-l span {
    font-weight: inherit !important;
    color: inherit !important;
    margin-right:1px;
    cursor:help;
}

.ed-pnl input[type="text"]:hover,.ed-pnl input[type="number"]:hover,.ed-pnl .in-wr:hover input{
    border-color:#777 !important;
}

.ed-pnl .grid-format:hover{
    border-color:#777 !important;
}

.ed-pnl input[type="text"]:focus,.ed-pnl input[type="number"]:focus{
    border-color:#0080FF !important;
}

.ed-pnl .grid-format:focus{
    border-color:#0080FF !important;
}

.ed-pnl .wyp-gradient-btn:hover,
.ed-pnl .wyp-bg-img-btn:hover,
.ed-pnl .wyp-unsplash-btn:hover{
    border-color:#0080FF !important;
}

/* Colorpicker */
.ed-pnl input.wyp-input {
    font-size: 12px !important;
    line-height: 16px !important;
    background: #FFF !important;
    color: #4e4e4e !important;
    border-radius: 3px !important;
            border: 1px solid #BBB !important;
    padding: 6px 4px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    font-style: normal !important;
}

.ed-pnl input.co-p{
  display:none;
}

.ed-pnl input.wyp-input {
    padding: 7px 4px !important;
    transition: all 0 ease !important;
}

.wyp-textarea {
    width: 100%;
    border: 1px solid #BBB;
    background: #FEFEFE;
    padding: 6px;
}

/* Radio */
.ed-pnl .ra input {
    display: none !important;
}

.ed-pnl .ra > label {
    font-size: 12px !important;
    display: block !important;
    background: #FFF !important;
    color: #555555 !important;
    margin:0 !important;
    padding: 6px 6px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    width: auto !important;
    transition: box-shadow 200ms ease;
    border: 1px solid #BBB !important;
    border-right-width:0px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align:center;
}

.ra .yicon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    opacity:0.9;
}

.ra svg{
  margin: 0 auto;
  display: block;
}

#background-repeat-group .ra svg{
  opacity:0.9;
}

.ra-gr-2 > .ra:nth-child(2) > label{
    border-right: 1px solid #BBB !important;
    border-radius: 0 3px 3px 0;
}

.ra-gr-3 > .ra:nth-child(3) > label{
    border-right: 1px solid #BBB !important;
    border-radius: 0 3px 3px 0;
}

.ra-gr-4 > .ra:nth-child(4) > label{
    border-right: 1px solid #BBB !important;
    border-radius: 0 3px 3px 0;
}

.ra-gr-5 > .ra:nth-child(5) > label{
    border-right: 1px solid #BBB !important;
    border-radius: 0 3px 3px 0;
}

.ra-gr-2 > .ra:nth-child(2):hover,.ra-gr-3 > .ra:nth-child(3):hover,.ra-gr-4 > .ra:nth-child(4):hover,.ra-gr-5 > .ra:nth-child(5):hover{
    margin-right:0px !important;
}

.ra-gr-2 > .ra:nth-child(1) > label{
    border-radius: 3px 0 0 3px;
}

.ra-gr-3 > .ra:nth-child(1) > label{
    border-radius: 3px 0 0 3px;
}

.ra-gr-4 > .ra:nth-child(1) > label{
    border-radius: 3px 0 0 3px;
}

.ra-gr-5 > .ra:nth-child(1) > label{
    border-radius: 3px 0 0 3px;
}

.ed-pnl .ra.active > label {
    color: #1592E6 !important;
    width: auto !important;
}

#border-style-group .ra.active > label:after,#border-top-style-group .ra.active > label:after,#border-right-style-group .ra.active > label:after,#border-bottom-style-group .ra.active > label:after,#border-left-style-group .ra.active > label:after{
    border-color:#1592E6;
}

.ed-pnl #wyp-text-align .ra > label {
    text-overflow: unset !important;
}

.ed-pnl .ra-c{
    display:flex;
}

.ed-pnl .ra {
    flex-grow:1;
    flex-shrink:1;
    flex-basis:auto;
}

.ed-pnl  .ra-c div.ra.active + div.ra > label{
    border-left-color:#bbbbbb !important;
}

.ed-pnl .ra > label:hover {
    border-color:#bbbbbb !important;
    border-right-width:1px !important;
    border-right-style:solid !important;
}

.ed-pnl .ra-c:not(#wyp-border-type):not(#wyp-spacing-type):not(#wyp-transform-type):not(#wyp-filter-type):not(#wyp-motion-type) .ra:hover{
    z-index:1000 !important;
}

.ed-pnl .ra:hover{
    margin-right:-1px !important;
}


/* in-ac */
.wyp-select-data {
    display: none !important;
}

.in-ac {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 16px !important;
    background: #FFF !important;
    color: #4e4e4e !important;
    border-radius: 3px !important;
            border: 1px solid #BBB !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    padding-right:26px !important;
}

.se-o .ac-p-d{
  position:relative;
}

.se-o .ac-p-d:after{
  speak: none;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  margin-top: -10px;
  pointer-events: none;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-family: "wyp-ed" !important;
  text-decoration: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  vertical-align: top !important;
  text-align: center !important;
  opacity: .7 !important;
  content: "\e801";
}

.se-o .ac-p-d.active:after{
  content:"\e81c";
}

.in-ac.active {
    border-radius:3px 3px 0px 0px !important;
    border-bottom-color: #EEE !important;
}

.in-ac.active.up-style-autocomplete-input,.in-ac.active.up-style-autocomplete-input-prefix{
    border-radius:0px 0px 3px 3px !important;
}

.ui-autocomplete {
    font-size: 12px !important;
    position: absolute;
    max-height: 272px;
    overflow-y: auto;
    z-index: 2147483647;
    border: 1px solid #0080FF !important;
    border-radius:0px 0px 8px 8px !important;
    list-style-type: none;
    background-color:#FFFFFF !important;
}

.un-s .ui-autocomplete{
    border-radius:0px 0px 3px 3px !important;
}

.ui-autocomplete.up-style-autocomplete,.ui-autocomplete.up-style-autocomplete-prefix{
    border-radius:8px 8px 0px 0px !important;
}

.ui-autocomplete li {
    font-size: 14px !important;
    background: #FFF !important;
    color: #444 !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 12px !important;
    cursor:default !important;
    overflow:hidden !important;
}

#ac-pl-font-family .ui-autocomplete li:not(.ui-autocomplete-category),
#ac-pl-font-weight .ui-autocomplete li:not(.ui-autocomplete-category),
#ac-pl-text-shadow .ui-autocomplete li:not(.ui-autocomplete-category){
  font-size:18px !important;
}

.ed-pnl .ac-d li.ui-autocomplete-category,.ed-pnl .ac-d li.ui-autocomplete-category:hover,.ed-pnl .ac-d li.ui-autocomplete-category.ui-state-focus {
  font-weight: 500;
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: #777 !important;
  padding: 3px 6px 0px 6px !important;
  position: sticky;
  top: 0px;
  border-bottom: 1px solid #EEE;
  background: #FFF !important;
}

.ui-autocomplete li:hover,li.ui-state-focus {
    background: #EEE !important;
}

.ui-autocomplete li.active-autocomplete-item{
  background:rgba(21, 146, 230, 0.15) !important;
}

.ac-d {
    position: relative;
    top:-1px;
}

.is-important {
    background: red !important;
}

.wyp-gradient-btn,.wyp-bg-img-btn,.wyp-unsplash-btn{
    display: block !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    color: #626262 !important;
    padding: 6px 8px !important;
    line-height:1 !important;
    border: 1px solid #CCC;
    background: #FFF !important;
    cursor: pointer !important;
    position:relative !important;
    z-index:10;
    font-weight: 500;
}

.wyp-gradient-btn{
    left:-1px;
}

.wyp-bg-img-btn{
    left:-2px;
}

.wyp-gradient-btn:hover,.wyp-bg-img-btn:hover,.wyp-unsplash-btn:hover{
    z-index:9999;
}

.wyp-unsplash-btn{
                    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.wyp-bg-img-btn{
                    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.wyp-gradient-btn.active,.wyp-bg-img-btn.active,.wyp-unsplash-btn.active{
    border-color: #0080FF !important;
    background: #0080FF !important;
    color: #FFF !important;
    z-index:100;
}

.wyp-theme-c{
  position:relative !important;
}

.wyp-theme-c i{
  content:"" !important;
  width:100% !important;
  height:100% !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  pointer-events: none !important;
}

.wyp-bg-img-btn,.wyp-gradient-btn,.wyp-unsplash-btn{
    float: left !important;
}

.wyp-after input {
    font-size: 11px !important;
    background: #FFFFFF !important;
    display: inline-block !important;
    max-width: 40px !important;
    text-align: center !important;
    color: #5d5d5d !important;
    padding: 0px 6px !important;
    border: 1px solid #BBB !important;
    height: 24px !important;
    font-style: normal !important;
}

body .css-un,body .wyp-bgs-prefix {
    border-radius: 0 3px 3px 0 !important;
    width:32px;
    max-width:32px;
    padding:0px 1px !important;
}

body .css-va,body .wyp-bgs-css-val {
    border-radius: 3px 0 0 3px !important;
    margin-right:-1px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;

    width:50px !important;
    max-width:50px !important;
}

.css-va:hover,.css-va:focus,.wyp-bgs-css-val:hover,.wyp-bgs-css-val:focus{
    position:relative;
    z-index:999;
}

.ed-pnl .bootstrap-select {
    display: none !important;
}

.css-un,.wyp-bgs-prefix {
    margin-left: 0 !important;
}

.wyp-after {
    font-size: 0 !important;
}

.wyp-after small {
    font-size: 10px !important;
    padding-left: 4px !important;
    color: #848484 !important;
}

input:focus{
    outline:none !important;
}

.wyp-t-cont > .op-g:last-child {
    border-bottom-width: 0 !important;
}

.ed-pnl .wyp-csng-sec{
    padding-top: 9px;
    padding-bottom: 7px;
    border-bottom: 1px solid #cfcfcf;
    background-color:#E5E5E5;
    position: sticky;
    top:0;
    z-index: 2147483647;
}

.wyp-bg-layer-active .ed-pnl .wyp-csng-sec{
  z-index: 2147483646;
}

.wyp-bg-layer-active .editor-leftbar, .wyp-bg-layer-active .anim-bar{
  z-index: 99999;
}

.wyp-bg-layer-active .ed-pnl-list > li.active > h3{
  z-index: 2147483645;
}

.wyp-bg-layer-active .iris-picker{
  z-index: 2147483647;
}

.ed-pnl .wyp-csng-sec,.ed-pnl .wyp-csng-sec small,.ed-pnl .wyp-csng-sec div,.ed-pnl .wyp-csng-sec .wyp-customizing-inner{
    cursor: default !important;
}

.ed-pnl .ed-pnl-footer {
    border-top: 1px solid #d9d9d9;
    background-color: #ececec;
    position:relative;
    border-radius: 0 0 8px 8px !important;
}

.ed-pnl-footer .wyp-panel-hide{
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    position: absolute;
    bottom: 7px;
    right: 10px;
    opacity: 0.40;
    cursor: pointer;
    color: #000;
    font-size:18px;
}

.ed-pnl-footer .wyp-panel-hide:hover{
    opacity:0.5;
}

.wyp-panel-show{
    position: fixed;
    z-index: 2147483647;
    margin-top: -20px;
    right: 0px;
    cursor: pointer;
    color: #FFFFFF;
    display: none;
    background-color:#888;
    width: 40px;
    height: 40px;
    line-height: 40px;
                    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23);
}

.wyp-fix-pan .wyp-panel-show {
    top: 50% !important;
}

.wyp-clean-look .wyp-panel-show,.wyp-cln-lo-manual .wyp-panel-show{
    display:block;
}

.wyp-shortcut-char{
    display:inline-block;
    padding-left:2px;
    opacity:0.6;
}

.ed-pnl .wyp-csng-sec > .wyp-customizing-inner{
    padding-left:12px !important;
    padding-right:10px !important;
}

.ed-pnl .wyp-csng-sec #wyp-crnt-el{
    font-size: 13px !important;
    line-height:16px !important;
    font-weight: 400 !important;
    display: inline-block !important;
    cursor:pointer !important;
    padding: 4px 6px 4px 22px !important;
    border-radius: 2px;
  background-repeat: no-repeat;

          -webkit-transform:translateX(-2px);

                  transform:translateX(-2px);
}

body.wyp-con-slcd .ed-pnl .wyp-csng-sec #wyp-crnt-el{
  color: rgb(11, 133, 215);
}

#wyp-crnt-el{
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg%3E%3Cg transform='translate(2 2)' fill='none' stroke='%23666666' stroke-width='2'%3E%3Crect width='9' height='9' stroke='none'/%3E%3Crect x='1' y='1' width='7' height='7' fill='none'/%3E%3C/g%3E%3Cline y2='3' transform='translate(6.5 -0.5)' fill='none' stroke='%23666666' stroke-width='1'/%3E%3Cline x2='3' transform='translate(-0.5 6.5)' fill='none' stroke='%23666666' stroke-width='1'/%3E%3Cline y2='3' transform='translate(6.5 10.5)' fill='none' stroke='%23666666' stroke-width='1'/%3E%3Cline x2='3' transform='translate(10.5 6.5)' fill='none' stroke='%23666666' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
   background-size:14px;
   background-position: 4px 6px;
}

body.customization-type-popup #wyp-crnt-el{
  pointer-events:none;
}

.ed-pnl .wyp-csng-sec #wyp-crnt-el:hover,body.wyp-crnt-el-menu .ed-pnl .wyp-csng-sec #wyp-crnt-el{
  background-color: rgba(104, 104, 104, 0.15);
}

body:not(.wyp-con-slcd) .ed-pnl .wyp-csng-sec #wyp-crnt-el{
  background-color: transparent;
  opacity:0.85;
  pointer-events:none;
}


.ed-pnl .wyp-csng-sec #wyp-crnt-el:after {
  position: absolute;
  white-space: nowrap;
  margin-top: 1px;
  content: "";
  display:none;
  margin-left: 4px;
  text-transform: uppercase;
  font-size: 11px;
  pointer-events: none;
  font-weight: 500;
  color: #629e4c;
}

body.wyp-con-slcd[data-wyp-selector=":hover"] .context-menu-root > .wyp-contextmenu-pseudo-classes:after,
body.wyp-con-slcd[data-wyp-selector=":focus"] .context-menu-root > .wyp-contextmenu-pseudo-classes:after,
body.wyp-con-slcd[data-wyp-selector=":link"] .context-menu-root > .wyp-contextmenu-pseudo-classes:after,
body.wyp-con-slcd[data-wyp-selector=":visited"] .context-menu-root > .wyp-contextmenu-pseudo-classes:after,
body.wyp-con-slcd[data-wyp-selector=":active"] .context-menu-root > .wyp-contextmenu-pseudo-classes:after,
body.wyp-con-slcd[data-wyp-selector=":checked"] .context-menu-root > .wyp-contextmenu-pseudo-classes:after,
body.wyp-con-slcd[data-wyp-selector=":disabled"] .context-menu-root > .wyp-contextmenu-pseudo-classes:after,
body.wyp-con-slcd[data-wyp-selector=":enabled"] .context-menu-root > .wyp-contextmenu-pseudo-classes:after,
body.wyp-con-slcd[data-wyp-selector=":invalid"] .context-menu-root > .wyp-contextmenu-pseudo-classes:after,
body.wyp-con-slcd[data-wyp-selector=":valid"] .context-menu-root > .wyp-contextmenu-pseudo-classes:after,

body.wyp-con-slcd.wyp-logged-in-mode .context-menu-root > .wyp-contextmenu-conditions:after,
body.wyp-con-slcd.wyp-non-logged-in-mode .context-menu-root > .wyp-contextmenu-conditions:after{
  opacity: 1;
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  margin-left: -3px;
  background-color:rgba(98, 158, 76, 0.7);
  border-radius: 30px;
      content: "";
  display: block;
}

body.wyp-con-slcd[data-clickable-select^="body.logged-in"] .context-menu-root > .wyp-contextmenu-conditions:after,
body.wyp-con-slcd[data-clickable-select^="body.non-logged-in"] .context-menu-root > .wyp-contextmenu-conditions:after{
	background-color:#56ADE8 !important;
}

body.wyp-con-slcd[data-wyp-selector=":hover"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"hover";
}

body.wyp-con-slcd[data-wyp-selector=":focus"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"focus";
}

body.wyp-con-slcd[data-wyp-selector=":link"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"link";
}

body.wyp-con-slcd[data-wyp-selector=":visited"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"visited";
}

body.wyp-con-slcd[data-wyp-selector=":active"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"active";
}

body.wyp-con-slcd[data-wyp-selector=":checked"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"checked";
}

body.wyp-con-slcd[data-wyp-selector=":disabled"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"disabled";
}

body.wyp-con-slcd[data-wyp-selector=":enabled"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"enabled";
}

body.wyp-con-slcd[data-wyp-selector=":invalid"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"invalid";
}

body.wyp-con-slcd[data-wyp-selector=":valid"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"valid";
}

body.wyp-con-slcd[data-clickable-select^="body.logged-in"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"logged-in";
}

body.wyp-con-slcd[data-clickable-select^="body.non-logged-in"] .ed-pnl .wyp-csng-sec #wyp-crnt-el:after{
  display: inline-block;
  content:"non-logged-in";
}

.ed-pnl .wyp-csng-sec #customizing-mode{
  font-size: 14px !important;
  font-weight: 400 !important;
  display: inline-block !important;
  padding:4px 0px 4px 26px !important;
  margin-bottom: 5px !important;
  cursor: pointer !important;
  margin-left: -2px !important;

  transition: background-color 150ms;
  border-radius: 3px;
  background-repeat: no-repeat;
  background-size: 17px 17px;
  background-position: 3px 3px;
  max-width: 94%;
}

.ed-pnl .wyp-csng-sec #customizing-mode:hover,.ed-pnl .wyp-csng-sec #customizing-mode.active{
    background-color: rgba(0,0,0,.05);
    z-index: 2147483647;
    position: relative;
}

#customizing-mode[data-this-type="global"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23646464' stroke-linejoin='round' stroke-width='3'%3E%3Ccircle cx='31.988' cy='32.02' r='29.98'/%3E%3Cg stroke-linecap='round' stroke-miterlimit='10'%3E%3Cpath d='M32.013 2v59.96'/%3E%3Cpath d='M2.032 31.98h59.96'/%3E%3C/g%3E%3Cellipse cx='31.848' cy='32.021' rx='18.13' ry='29.979'/%3E%3Cpath d='M12.593 9.515c0 2.75 8.683 7.787 19.396 7.787s19.393-5.04 19.393-7.787m-38.79 45.26c0-2.748 8.683-7.787 19.396-7.787s19.393 5.04 19.393 7.787' stroke-linecap='round' stroke-miterlimit='10'/%3E%3C/svg%3E");
}

#customizing-mode[data-this-type="template"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170.667' height='170.667' viewBox='0 0 128 128' fill='%23646464'%3E%3Cpath d='M21.4 0H92c8.67 8.73 16.92 17.87 25.57 26.63l.03 91.3-10 .05-.02 10H11.4l-.07-117.9c3.35-.15 6.7-.06 10.05-.1V0m5.3 5.6v106.8h85.54l-.01-81.8c-8.2-.24-16.4.08-24.6-.16l.15-24.78-61.08-.05m66.56 3.63c-.12 5.23-.04 10.46-.05 15.7 4.92.37 9.88.1 14.82.14-4.53-5.6-9.9-10.5-14.77-15.83M16.72 15.6v106.8h85.53l.02-4.2c-26.95-.54-53.93-.02-80.9-.26l.03-102.4a121.76 121.76 0 0 0-4.68.09zM39.2 46.15l59.17.07a134.3 134.3 0 0 0 .05 5.31c-19.76.32-39.53.08-59.3.12l.07-5.5zm-.03 18.07l57.82.02 1.48.25-.08 5.03c-19.73.14-39.46-.01-59.2.07l-.02-5.37zm.03 17.74l59.2.22-.02 5.3c-19.7.14-39.43-.03-59.14.1-.13-1.87-.08-3.74-.03-5.6z'/%3E%3C/svg%3E");
}

#customizing-mode[data-this-type="single"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23646464'%3E%3Cpath d='M15.34 26.542h32.407M15.34 36.25h32.407m-32.407 9.7h32.407' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='3'/%3E%3Cg stroke-miterlimit='10' stroke-width='3'%3E%3Cpath d='M43.437 1.5H7.218v61H56.78V15.083L43.676 1.5z'/%3E%3Cpath d='M56.78 15.083H43.437V1.5'/%3E%3C/g%3E%3C/svg%3E");
}

.ed-pnl .wyp-csng-sec .wyp-t-cont {
    padding: 0 !important;
    margin: 0 !important;
}

.ed-pnl .ed-pnl-footer h3 a {
    cursor: pointer !important;
    text-decoration: none !important;
}

.ed-pnl .ed-pnl-footer h3 {
    text-align: center !important;
}

.ed-pnl .ed-pnl-footer h3 a,.ed-pnl .ed-pnl-footer > h3 {
    color: #686868 !important;
    font-size: 10px !important;
    text-transform: uppercase;

}

.ed-pnl .ed-pnl-footer h3 a:first-child {
    font-weight: 500 !important;
}

.ed-pnl .ed-pnl-footer h3 a:hover {
    text-decoration: underline !important;
}

.ed-pnl .ed-pnl-footer {
    padding-top: 0 !important;
}

.ed-pnl .wyp-csng-sec .wyp-t-cont p {
    padding: 10px 20px 15px !important;
    margin: 0 !important;
    line-height: 19px !important;
    color: #444 !important;
}

.media-control {
    text-decoration: underline;
    cursor: pointer;
  pointer-events:all;
}

.ed-pnl .wyp-close-btn {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;

    background-size: 15px;
    width: 46px;
    height: 45px;
    display: inline-block;
    background-position: 14px center;
    background-repeat: no-repeat;
    opacity:0.64;
    font-size:0px;
    transition: opacity 100ms ease;
}

.visual-manager-close, .ed-pnl .wyp-close-btn{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M67.351,75.212,44.841,52.7,22.332,75.212a5.56,5.56,0,0,1-7.862-7.862L36.979,44.84,14.469,22.331a5.56,5.56,0,0,1,7.862-7.862L44.841,36.978,67.351,14.469a5.56,5.56,0,1,1,7.862,7.862L52.7,44.84,75.213,67.35a5.56,5.56,0,0,1-7.862,7.862Z' transform='translate(-12.841 -12.84)' fill='%23fff'/%3E%3C/svg%3E");
}

.ed-pnl .wyp-close-btn:hover{
    opacity:0.74;
}

.ed-pnl .wyp-close-btn.icon-menu{
    font-size: 29px;
    line-height: 45px;
    background-image: none !important;
    font-family: "wyp-ed" !important;
    color: rgba(255,255,255,0.96) !important;
    text-align: center;
}

.ed-pnl .ed-pnl-footer > h3 {
    padding: 9px 12px !important;
    font-weight:500;
}

.ed-pnl .ed-pnl-footer > h3,.ed-pnl .ed-pnl-footer {
    cursor: default !important;
}

.wyp-fix-pan:not(.wyp-cln-lo-panel-only):not(.wyp-cln-lo-manual) .ed-pnl .ed-pnl-footer{
    position: fixed;
    bottom: 0px !important;
    right: 0px;
}

.wyp-fix-pan:not(.wyp-cln-lo-panel-only):not(.wyp-cln-lo-manual) .ed-pnl .ed-pnl-footer{
    bottom: 0px !important; /* parent bar */
}

.wyp-right-panel-placeholder{
    width:40px;
    background-color:rgba(66, 133, 244, 0.5) !important;
    position:fixed;
    right:0px;
    top:0px;
    z-index:100;
    height:100%;
    display:none;
    box-shadow: 0px 0px 20px 0 rgba(66, 133, 244, 0.15);
}

.wyp-right-panel-placeholder.active{
    background-color:rgba(66, 133, 244, 0.9) !important;
    box-shadow: 0px 0px 20px 0 rgba(66, 133, 244, 0.45);

}

body.wyp-fix-pan:not(.wyp-cln-lo-panel-only):not(.wyp-cln-lo-manual) .ed-pnl-inner{
    border-bottom-width:0px !important;
}

#display-inline-block {
    font-size: 11px !important;
    text-align: center !important;
    padding-bottom: 9px !important;
    padding-top: 9px !important;
}

#z-index-after {
    display: none !important;
}

#opacity-after {
    display: none !important;
}

#blur-filter-after,#brightness-filter-after,#grayscale-filter-after,#invert-filter-after,#contrast-filter-after,#hue-rotate-filter-after,#saturate-filter-after,#sepia-filter-after,#blur-backdrop-filter-after,#brightness-backdrop-filter-after,#grayscale-backdrop-filter-after,#invert-backdrop-filter-after,#contrast-backdrop-filter-after,#hue-rotate-backdrop-filter-after,#saturate-backdrop-filter-after,#sepia-backdrop-filter-after,#column-count-after{
    display: none !important;
}

#text-align-justify {
    letter-spacing: 1.1px !important;
}

#opacity-group .sl-d,#scale-transform-group .sl-d,#rotatex-transform-group .sl-d,#rotatey-transform-group .sl-d,#rotatez-transform-group .sl-d,#translate-x-transform-group .sl-d,#translate-y-transform-group .sl-d,#skew-x-transform-group .sl-d,#skew-y-transform-group .sl-d,#perspective-group .sl-d,#blur-filter-group .sl-d,#brightness-filter-group .sl-d,#grayscale-filter-group .sl-d,#invert-filter-group .sl-d,#contrast-filter-group .sl-d,#hue-rotate-filter-group .sl-d,#saturate-filter-group .sl-d, #sepia-filter-group .sl-d,#box-shadow-blur-radius-group .sl-d,#box-shadow-spread-group .sl-d,#box-shadow-horizontal-group .sl-d,#box-shadow-vertical-group .sl-d,#z-index-group .sl-d, #blur-backdrop-filter-group .sl-d,#brightness-backdrop-filter-group .sl-d,#grayscale-backdrop-filter-group .sl-d,#invert-backdrop-filter-group .sl-d,#contrast-backdrop-filter-group .sl-d,#hue-rotate-backdrop-filter-group .sl-d,#saturate-backdrop-filter-group .sl-d, #sepia-backdrop-filter-group .sl-d, #column-count-group .sl-d{
  width: ms-calc(100% - 66px);
  width: calc(100% - 66px);
}

#text-transform-uppercase {
    text-transform: uppercase;
}

#text-transform-lowercase {
    text-transform: lowercase;
}

#text-transform-capitalize {
    text-transform: capitalize;
}

#text-decoration-overline {
    text-decoration: overline;
}

#text-decoration-line-through {
    text-decoration: line-through;
}

#text-decoration-underline {
    text-decoration: underline;
}

#font-style-normal {
    font-style: normal;
}

#font-style-italic {
    font-style: italic;
}

body.wyp-res-mod .wyp-just-desktop,body.wyp-res-mod .wyp-just-desktop {
    display: none !important;
}

.wyp-advanced-option {
    display: none;
}

.wyp-advanced-link {
    display: block !important;
    padding: 12px 18px !important;
    color: #333 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    margin-top: -1px !important;
    margin-bottom: 6px !important;
    border-width: 0 !important;
    margin-left: 16px;
    margin-right: 16px;

}

.wyp-advanced-link.wyp-on {
    margin-bottom: 0 !important;
}

.wyp-advanced-link.wyp-margin-top {
    margin-top: 6px !important;
}

.wyp-advanced-option {
    background: #f9f9f9 !important;
    padding: 0 !important;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    margin-bottom: 26px !important;
    margin-left: 16px;
    margin-right: 16px;
}

.wyp-advanced-option .op-g {
    padding-left: 16px;
    padding-right: 16px;
}

.wyp-show {
    display: block !important;
}

.wyp-advanced-option .op-g:last-child {
    border-bottom-width: 0 !important;
}

.wyp-live-editor-link {
    display: none !important;
}


/* medium */
body.wyp-res-mod #iframe {
    left: 50%;
    top: 0;
    width: 768px;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

body.wyp-res-mod #iframe {
    height: calc(100% - 24px); /* ed-elt-tr and metric breakpoint bars */
}

.responsive-right-handle,.responsive-left-handle{
    width: 14px;
    position: fixed;
    z-index: 100;
    cursor: e-resize;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-187.5 -240.5)' fill='none' stroke='%23626262' stroke-width='2'%3E%3Cpath transform='translate(188.5 240.5)' d='m0 0v44'/%3E%3Cpath transform='translate(194.5 240.5)' d='m0 0v44'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 4px 22px;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
    background-color: rgba(255,255,255,0.3);
}

.responsive-right-handle:after,.responsive-left-handle:after{
  background: #484848;
  width: 2px;
  height: 21px;
  content: " ";
  position: absolute;
  top: -24px;
  left:0px;
  opacity:0.4;
  pointer-events:none;
}

body.wyp-res-mod .responsive-right-handle,
body.wyp-res-mod .responsive-left-handle{
    display: block;
}

body.wyp-res-mod #iframe{
    z-index:30 !important;
}

body.wyp-res-resizing .metric-top-border {
    display:none !important;
}

.breakpoint-bar{
    display: none;
    width: 100%;
    height: 24px;
    background-color: #767676;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    border-bottom: 1px solid #242424;
    box-shadow: 0 0 10px 0 rgba(60,60,60,0.34);
}

.breakpoint-bar .empty-placeholder{
  height: 23px;
  position: absolute;
  top: 0px;
  padding: 0 6px;
  border-right: 1px solid #313131;
  border-left: 1px solid #313131;
  z-index: 60;
  background: #767676;
}

.breakpoint-bar .min-width.breakpoint-item.last-min-breakpoint {
    border-left: none !important;
    border-right: none !important;
}

.breakpoint-bar .breakpoint-item{
    height:23px;
    position: fixed;
    top:0px;
    padding: 0 6px;

    background-repeat: no-repeat;
    box-sizing:border-box;

    overflow:hidden;

    display: flex;
    justify-content: space-between;
    background-color:#767676;

    border-right: 1px solid #313131;
    border-left: 1px solid #313131;
    cursor: pointer;
}

.breakpoint-bar .breakpoint-item.edited:after,
.breakpoint-bar .breakpoint-item.breakpoint-has-node-edit:after{
  content: " ";
  display: block;
  width: 7px;
  height: 7px;
  top: 8px;
  background-color: #6BD063;
  position: absolute;
  border-radius: 10px;
  pointer-events: none;
  left: 7px;
  right: auto;
  z-index: 2147483646;
}

.breakpoint-bar .breakpoint-item.edited.small-breakpoint:after{
  left:2px;
}

.breakpoint-bar .breakpoint-item.edited.xsmall-breakpoint:after{
  left:1px;
}

body.node-has-current-screen-edits .breakpoint-bar .breakpoint-item.focus:after,
.breakpoint-bar .breakpoint-item.breakpoint-has-node-edit:after{
  background-color:#7aa7ff;
}

.breakpoint-bar .breakpoint-item.focus,
.breakpoint-bar .breakpoint-item.active{
  background-color: #595959;
}

.breakpoint-bar .breakpoint-item.hover-breakpoint,
.breakpoint-bar .breakpoint-item.context-menu-active,
body.wyp-contextmenu-breakpoint .breakpoint-bar .breakpoint-item.active,
body.wyp-contextmenu-breakpoint .breakpoint-bar .breakpoint-item.focus{
  background-color: #595959;
}

body.wyp-res-mod .breakpoint-bar {
    display: flex;
    justify-content: center;
}


#cssData {
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 99999;
    padding: 20px;
    display: none;
    border-right: 1px solid #000;
    box-sizing: border-box;
}

body.wyp-css-ed-act:not(.wyp-css-ed-drgable) #cssData{
    height: calc(100% - 36px) !important;
    height: -webkit-calc(100% - 36px) !important;
}

body.css-error-message:not(.wyp-css-ed-drgable) #cssData{
    margin-top:26px;

    height: calc(100% - (36px + 26px)) !important;
    height: -webkit-calc(100% - (36px + 26px)) !important;
}

body.css-error-message.wyp-css-ed-drgable #cssData{
  margin-top:26px;
}

#cssEditorBar {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    height: 36px;
    background: #171717;
    font-size: 0px !important;
    line-height: 15px !important;
    border-bottom: 1px solid #3b3b3b;
    padding-left: 40px;
    padding-right: 12px;
}

#cssEditorBar .editor-tabs{
    display: inline-block;
    color: #9e9e9e;
    font-size: 12px;
    background-color: #303030;
    padding: 6px 0px 6px 22px;
    position: relative;
    top: 7px;
    line-height: 16px;
    width: 32%;
    max-width: 180px;
    min-width: 100px;
    cursor: pointer;
    border-radius: 16px 16px 0px 0px;

    font-weight: 500;
    transition: padding-left 50ms linear;
}

#cssEditorBar .editor-tabs.disabled{
    cursor:default;
    color: #707070;
    display:none;
}

#cssEditorBar .editor-tabs.active{
    color: #bdbdbd;
    background-color:#383838;
    z-index: 200;
    padding-left:33px;
}

#cssEditorBar .editor-tabs i{
    display:none;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 14px;
    left: 21px;
    margin-top: -3px;
    margin-left: -3px;
    background-color: #419BF9;
    content: " ";
    border-radius: 6px;
    opacity: 0.5;
}

#cssEditorBar .editor-tabs.active i{
    display:block;
}

#cssEditorBar .editor-tabs:after{
    content: " ";
    position: absolute;
    top: 0px;
    right: -12px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 29px solid #171814;
    z-index: 400;
    pointer-events:none;
}

#cssEditorBar .editor-tabs:before{
    content: " ";
    position: absolute;
    top: 0px;
    left: -12px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 29px solid #171814;
    z-index: 400;
    pointer-events:none;
}

#cssEditorBar .editor-tab-border{
    box-shadow: 0px -3px 3px -3px rgba(0,0,0,0.5);
    position: absolute;
    bottom: -100%;
    width: 100%;
    display: block;
    height: 100%;
    z-index: 100;
    left: 0;
    pointer-events:none;
}

.wyp-css-editor-detach{
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  top: 3px;
  right: 3px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
  z-index: 400;
  font-size: 20px;
  color: #FFF;
}

.wyp-css-editor-detach:hover{
  opacity:0.6;
}

body.wyp-css-ed-drgable .wyp-css-editor-detach{
  -webkit-transform:rotate(-90deg);
          transform:rotate(-90deg);
}

#leftAreaEditor {
    position: fixed !important;
    left: 0;
    top: 0;
    z-index: 9999997;
    height: 100%;
    box-shadow: 10px 0 20px 0 rgba(0,0,0,0.2);
    display: none;
}

body.wyp-css-ed-act:not(.wyp-css-ed-drgable) #leftAreaEditor{
    height: 100% !important;
}

body.wyp-res-mod:not(.wyp-crnt-el-menu) .context-menu-root {
    margin-top: 24px;
}

/* css editor new: detach. */
.wyp-css-ed-drgable #cssEditorBar{
  border-radius: 5px 5px 0 0;
  cursor:move;
}

.wyp-css-ed-drgable #cssData{
  border-radius: 0 0 5px 5px;
}

.wyp-css-ed-drgable #leftAreaEditor{
  border-radius:5px;
  box-shadow: 4px ​4px 20px 0 rgba(0,0,0,0.4);
}

.wyp-css-ed-drgable #leftAreaEditor{
  position:absolute;
  top:0;
  left:calc(14px + 46px);
}

body.wyp-fix-leftbar.wyp-css-ed-drgable #leftAreaEditor{
  top:14px;
}

.editor-leftbar {
    position: fixed;
    z-index: 9999998;
    top: 14px;
    left: 14px;
    background: linear-gradient(180deg,rgb(246, 246, 246) 0%, rgb(230, 230, 230) 100%);
    border-radius:8px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px 2px 10px 0 rgba(0,0,0,0.23) !important;
    width:46px !important;
}

.wyp-fix-leftbar .editor-leftbar{
  top:0;
  left:0;
  height:100%;
  background:rgb(235, 235, 235);
  width:44px !important;
  border-radius:0;
  box-shadow: 0 0 0px 1px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2) !important;
}

.wyp-fix-leftbar.wyp-css-ed-act:not(.wyp-css-ed-drgable) .editor-leftbar {
    background: rgba(235, 235, 235, 0.8);
}

.wyp-fix-leftbar.wyp-css-ed-act:not(.wyp-css-ed-drgable) .editor-leftbar > .leftbar-button{
  opacity: 0.9 !important;
}

.wyp-fix-leftbar #ed-elt-tr{
  box-shadow: 0 0 0px 1px rgba(0,0,0,0.17), 0 0 4px 1px rgba(0,0,0,0.2) !important;
}

.leftbar-button {
    color:#606060;
    font-size: 0;
    padding:12.5px 0;
    text-align: center;
    cursor: pointer;
    position:relative;
}

.left-menu-btn{
  border-top: 1px solid #a9a9a9;
    padding: 9px 0px;
}

body:not(.wyp-fix-leftbar) .left-menu-btn{
  border-top: 1px solid #CCCCCC;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

body.wyp-fix-leftbar .left-menu-btn {
    top: auto;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.left-menu-btn span{
  color:#8D8D8D;
}

.wyp-responsive-btn.active:hover,.leftbar-button:not(.active):not(.disabled):not(.wyp-responsive-btn):hover,.left-menu-btn.yhover{
    background: #d6d6d6;
    background: radial-gradient(ellipse at center,  #d6d6d6 0%,#cbc9c9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#cbc9c9',GradientType=1 );
}

.ace_gutter-layer {
    min-width: 46px !important;
}

.metric-top-border {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    z-index: 99;
    width: 2px;
    background-color: rgba(230, 40, 40, 0.85);
    margin-left: 0px;
    height: 100%;
    pointer-events: none;
    display: block !important;
}

.metric-left-border {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    z-index: 99;
    width: 100%;
    background-color: rgba(230, 40, 40, 0.85);
    margin-top: 0px;
    height: 2px;
    pointer-events: none;
    display: block !important;
}

body.wyp-res-mod .metric-left-border {
    margin-top: 0;
}

body.wyp-res-resizing-right .metric-top-tooltip,
body.wyp-res-resizing-right .metric-left-border,
body.wyp-res-resizing-left .metric-top-tooltip,
body.wyp-res-resizing-left .metric-left-border {
    display: none !important;
}

body.wyp-res-resizing #iframe{
    pointer-events:none !important;
}

.metric-top-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 99;
    padding: 4px 8px;
    pointer-events: none;
    background-color: rgba(230, 40, 40, 0.85);
    color: #FFF;
    font-size: 11px;
    margin-top: -1px;
    margin-left: 0;
    border-bottom-right-radius: 3px;
    font-weight: 500;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px 2px 10px 0 rgba(0,0,0,0.23);
}

.metric-left-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 99;
    padding: 4px 8px;
    pointer-events: none;
    background-color: rgba(230, 40, 40, 0.85);
    color: #FFF;
    font-size: 11px;
    margin-left: -1px;
    margin-top: 0;
    border-bottom-right-radius: 3px;
    font-weight: 500;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px 2px 10px 0 rgba(0,0,0,0.23);
}

body.wyp-res-mod .metric-left-tooltip {
    margin-top: 24px;
}

body.wyp-res-mod .metric-left-border {
    margin-top: 0px;
}

.metric-top-tooltip span,.metric-left-tooltip span {
    padding-left: 4px;
}

body.wyp-met-dis .metric-left-border,body.wyp-met-dis .metric-top-border {
    display: none !important;
}

body.wyp-met-dis .metric-left-tooltip,body.wyp-met-dis .metric-top-tooltip {
    display: none !important;
}

body.wyp-if-movleav .metric-top-border,
body.wyp-if-movleav .metric-left-border,
body.wyp-if-movleav .metric-top-tooltip,
body.wyp-if-movleav .metric-left-tooltip{
  display:none !important;
}

body.wyp-res-resizing .metric-left-tooltip, body.wyp-res-resizing .metric-top-border{
  display:block !important;
}

body.wyp-res-mod #iframe {
    margin-top: 24px;
}

.css-editor-btn {
    border-left-width: 0;
}

.leftbar-button.active:not(.wyp-responsive-btn):after,.wyp-responsive-btn:not(.active):after{
    display: block;
    content: " ";
    width: 32px;
    height: 32px;
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #adadad;
    border-radius: 6px;
    top: 8px;
    left: 5px;
    z-index: -1;
}

.leftbar-button .yicon {
    font-size: 25px;
    width: 25px;
    height: 25px;
}

.wyp-tooltip-shortcut {
    opacity: 0.7;
    display: block;
    font-size: 90%;
}

.wyp-tooltip-shortcut2 {
    display: block;
    font-size: 90%;
}

.wyp-s-shortcut{
    opacity:0.7;
}

.breakpoint-tooltip-t{
  display:block;
  text-align:center;
  opacity:0.7;
}

.breakpoint-tooltip-e{
 display:block;
 text-align:center;
 color:#b4d58f
}

.wyp-css-close-btn {
    font-family: "wyp-ed";
    width: 36px;
    height: 36px;
    position: absolute;
    top: -1px;
    left: 2px;
    line-height: 40px;
    font-size: 28px;
    color: #E3E3E3;
    cursor: pointer;
    transition: color 200ms ease 0;
    text-decoration: none;
    opacity: 0.6;
}

.unvalid-css-cover,.unvalid-css-error{
    display:none !important;
}

.css-code-unvalid .unvalid-css-cover{
    display:block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999996;
    cursor:no-drop;
}

.unvalid-css-error{
  position: absolute;
      top: 36px;
      left: 0;
      width: 100%;
      background-color: #a43a3a;
      z-index: 2147483648;
      font-size: 12px;
      line-height: 15px;
      font-weight: 500;
      color: rgba(255,255,255,0.8);
      padding: 6px 10px;
      height: 26px;
      overflow: hidden;
}

body.css-error-message .unvalid-css-error{
  display:block !important;
}

#scale-transform-after{
    display: none !important;
}

#rotatex-transform-after{
    display: none !important;
}

#rotatey-transform-after{
    display: none !important;
}

#rotatez-transform-after{
    display: none !important;
}

#translate-x-transform-after{
    display: none !important;
}

#translate-y-transform-after{
    display: none !important;
}

#skew-x-transform-after{
    display: none !important;
}

#skew-y-transform-after{
    display: none !important;
}

#perspective-after{
    display: none !important;
}

#box-shadow-horizontal-after{
    display: none !important;
}

#box-shadow-vertical-after{
    display: none !important;
}

#box-shadow-blur-radius-after{
    display: none !important;
}

#box-shadow-spread-after{
    display: none !important;
}

body.wyp-clean-look:not(.wyp-fix-pan) .ed-pnl,
body.wyp-clean-look #ed-elt-tr,
body.wyp-cln-lo-manual .ed-pnl,
body.wyp-cln-lo-manual #ed-elt-tr{
    display: none !important;
}

body.wyp-cln-lo-panel-only .ed-pnl{
  display:none !important;
}

body.wyp-cln-lo-manual:not(.wyp-fix-leftbar) .editor-leftbar,
body.wyp-clean-look:not(.wyp-fix-leftbar) .editor-leftbar{
  visibility:hidden;
  pointer-events:none;
}

.left-menu-sublist ul li.hide-panel-hint strong{
  color:#368036;
}

.left-menu-sublist ul li.hide-panel-hint{
  color:#676767;
}

body.wyp-cln-lo-manual:not(.wyp-fix-leftbar) .editor-leftbar .interface-settings-switch,
body.wyp-clean-look:not(.wyp-fix-leftbar) .editor-leftbar .interface-settings-switch{
  display:none !important;
}


body.wyp-cln-lo-manual:not(.wyp-css-ed-drgable) .editor-leftbar #leftAreaEditor,
body.wyp-clean-look:not(.wyp-css-ed-drgable) .editor-leftbar #leftAreaEditor{
  visibility:visible;
  pointer-events:auto;
}

body.wyp-clean-look .wyp-message-box,body.wyp-cln-lo-manual .wyp-message-box{
  display:none !important;
}

#image_uploader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -250px;
    background: #F5F5F5;
    z-index: 9999;
    width: 500px;
    height: 500px;
    z-index: 10000000;
    box-shadow: 0 0 100px 0 rgba(255,255,255,0.2);
    display: none;
    padding-top: 10px;
    border-radius:8px;
    overflow:hidden;
}

#image_uploader_background {
    background: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    display: none;
    cursor: -webkit-zoom-out !important;
    cursor: zoom-out !important;
}

#selector-editor-background {
    background: rgba(0, 0, 0, 0.70);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483646;
    display: none;
    cursor: -webkit-zoom-out !important;
    cursor: zoom-out !important;
}

#image_uploader iframe {
    width: 100%;
    height: 100%;
    border-width: 0;
}

.wyp-badge {
    padding: 0px 2px 0px 2px;
    font-size: 11px;
    text-transform: uppercase;
    background-color: rgba(243,130,85,0.95);
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500;
    pointer-events: none;
    position: absolute;
    top: auto;
    left: auto;
    border-radius: 3px;
    margin-left: 5px;
}

.wyp-popup-background {
    z-index: 2147483645;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(89, 89, 89, 0.85);
    display: none;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.wyp-info-modal {
    position: fixed;
    z-index: 2147483646;
    background-color: #FFFFFF;
    top: 50%;
    left: 50%;
    width: 650px;
    height: 500px;
    margin-left: -325px;
    margin-top: -250px;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.14);
    padding: 0;
    box-sizing: border-box;
    display: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='236.841' height='206.634'%3E%3Cdefs%3E%3ClinearGradient id='A' x1='.5' x2='.5' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%2380a0e5' stop-opacity='.64'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M49.584 67.54l120.27-19.19.886 61L50.8 115.31z' transform='matrix(-.743145 .669131 -.669131 -.743145 304.055 128.316)' fill='url(%23A)' opacity='.9'/%3E%3Cg fill='%236896f8'%3E%3Cpath d='M104.018 161.494l-84.97-84.88 169.986-.116z' opacity='.9'/%3E%3Cpath d='M107.538 35.8h56.7l24.72 40.826-170.4-.1L50.35 35.8z' opacity='.9'/%3E%3C/g%3E%3Cpath d='M75.28 76.832L50.05 35.858l57.25-.005z' fill='%236f97ec' opacity='.9'/%3E%3Cpath d='M104.023 161.547l85.192-84.94-61.3-.3z' fill='%233a6edc' opacity='.9'/%3E%3Cpath d='M104.05 161.525l-29.5-85.172h57.667z' fill='%236896f8' opacity='.9'/%3E%3Cpath d='M132.23 76.586l-25.063-40.728h57.085z' fill='%235485ee' opacity='.9'/%3E%3Cpath d='M104.096 161.635l-86-85.055h57.12z' fill='%2395b7ff' opacity='.9'/%3E%3Cpath d='M164.205 35.837l25 40.768-57-.08z' fill='%23417bf8' opacity='.9'/%3E%3Cpath d='M50.065 35.853l25.15 40.753h-57.12z' fill='%23adc8ff' opacity='.9'/%3E%3Cg fill='%2386acff'%3E%3Cpath d='M107.216 35.858l25 40.667-56.788.08z' opacity='.9'/%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M5.85 48.347a5.85 5.85 0 0 0 5.848 5.843v.006c-1.55-.001-3.038.614-4.134 1.7S5.85 58.49 5.85 60.04h0c-.001-1.55-.617-3.037-1.714-4.133S1.55 54.195 0 54.196V54.2a5.85 5.85 0 0 0 5.849-5.843z' opacity='.72'/%3E%3Cpath d='M222.265 47.348c0 3.866 1.535 7.573 4.27 10.306s6.44 4.268 10.307 4.268v.01c-8.05.004-14.576 6.534-14.574 14.585h-.02c.001-8.054-6.526-14.583-14.58-14.585v-.01c3.866 0 7.573-1.535 10.306-4.27s4.268-6.44 4.268-10.307z' opacity='.8'/%3E%3Cpath d='M20.516 105.055c0 6.516 5.282 13.8 11.8 13.8v.01a11.8 11.8 0 0 0-11.8 11.805H20.5a11.8 11.8 0 0 0-11.8-11.8v-.01c6.516 0 11.8-7.282 11.8-13.8z' opacity='.72'/%3E%3Cpath d='M187.85 0c.007 6.535 5.306 11.83 11.84 11.83v.01c-3.14-.002-6.15 1.244-8.37 3.463s-3.47 5.23-3.47 8.368h0c-.001-3.14-1.25-6.15-3.47-8.368s-5.232-3.464-8.37-3.462v-.01c6.535-.001 11.834-5.294 11.842-11.83z' opacity='.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 237px auto;

    text-align: center;
    border-radius: 4px;
    color: #516280;
}

.wyp-info-unlock-p{
  color: #4E6EA6;
  font-size: 14px;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 30px;
  display: block;
  font-weight: 500;
  text-transform: capitalize;
}

.wyp-action-area a {
 border-radius: 3px;
 text-decoration: none;
 color: #FFF;
 font-weight: 400;
 font-size: 16px;
 cursor: pointer;
 transition: background-color 200ms ease;
}

.wyp-info-modal-close {
 padding: 9px 20px;
 background-color: #999999;
 margin-right: 20px;
}

.wyp-info-modal-close:hover{
 background-color: #888888;
}

.wyp-buy-link {
 padding: 13px 27px;
 background-color: #F73859;
}

.wyp-buy-link:hover{
  background-color:#C62E46;
}

.wyp-action-area {
 margin-top: 220px;
 display: block;
}

.wyp-info-modal-top-inner h2{
 margin-top: 35px;
 font-weight: 500;
 color: #2D4271;
 margin-bottom: 10px;
 font-size: 24px;
}

.wyp-info-modal-top-inner p{
 font-size: 16px;
 width: 65%;
 margin: 0 auto;
 line-height: 1.6;
}

.wyp-info-last-note {
   font-size: 13px;
   width: 80%;
   margin: 0 auto;
   margin-top: 32px;
   display: block;
}

.breakpoints-tooltip{
  text-align:center;
}

.responsive-size-text {
  position: fixed;
  color: #EAEAEA;
  text-shadow: 0px 0px 1px #202020;
  font-size: 13px;
  line-height: 23px;
  display: none;
  z-index: 9999;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding-bottom:1px;
  width: 240px;
  text-align: center;
}

.wyp-res-resizing .responsive-add-breakpoint{
  display:none;
}

.responsive-add-breakpoint{
    position: fixed;
    z-index: 101;
    margin-left: -13px;
    cursor: pointer;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 5px;
    display:none;
    opacity:0.9;
    z-index: 2147483646;
}

body:not(.wyp-res-mod) .responsive-add-breakpoint{
  display:none !important;
}

body.wyp-res-resizing .responsive-add-breakpoint{
  display:none !important;
}

.responsive-add-breakpoint span{
text-align: center;
width: 16px;
height: 16px;
font-size: 13px;
background-color: #FFF;
color: #555;
border-radius: 100%;
line-height: 18px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23) !important;
}

.tooltip-breakpoint-add .tooltip-inner{
  text-align:center !important;
}

body.wyp-res-resizing-right .metric-left-tooltip,
body.wyp-res-resizing-left .metric-left-tooltip{
  box-shadow:none !important;
  opacity:1 !important;
  z-index:120 !important;
  font-size:12px !important;
  margin-left:0px !important;
  border-radius:0px 0px 4px 0px !important;
}

body.wyp-res-resizing-right .metric-top-border,
body.wyp-res-resizing-left .metric-top-border{
  opacity:1 !important;
}

.wyp-res-mod .responsive-size-text {
    display: block;
}

.wyp-visual-editor-link-holder{
    margin-left:22px;
}

.wyp-visual-editor-link{
  font-size: 9px !important;
  color: #FFF !important;
  padding: 3px 6px !important;
  background: #558EEC !important;
  letter-spacing: 0.4px;
  cursor: pointer !important;
  border-radius: 8px;
  text-transform: uppercase;
  margin-right: 6px;
  position: relative !important;
  margin-left: 24px !important;
  top: -1px;
  font-weight: 500;
  line-height: 0px;
}

.un-s{
  position: relative;
}

.un-s ul{
  right: 0px;
  top: -4px;
}

.background-size-custom-group .un-s ul{
  top:-19px !important;
}

.un-s ul .ui-state-focus{
  background-color:transparent !important;
}

.un-s ul li:hover{
  background-color:#EEE !important;
}

.un-s .ui-autocomplete li {
    line-height: 20px !important;
    height: 20px !important;
    padding: 0 10px !important;
    font-size:11px !important;
}

#selector-editor-box{
    position: fixed;
    top: 0;
    left: 28%;
    width: 44%;
    margin-top: 60px;
    z-index: 2147483647;
    font-size: 14px;
    display: none;
    height: auto;
}

#wyp-selector-editor {
    width: 100%;
    padding: 12px 10px;
    color: #FFF;
    font-size: inherit;
    background: #4285F4;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23);
    border: none;
}

#wyp-selector-editor::-webkit-input-placeholder{
  color:rgba(255,255,255,0.5) !important;
}

#wyp-selector-editor::-moz-placeholder{
  color:rgba(255,255,255,0.5) !important;
}

#wyp-selector-editor:-ms-input-placeholder{
  color:rgba(255,255,255,0.5) !important;
}

#wyp-selector-editor::-ms-input-placeholder{
  color:rgba(255,255,255,0.5) !important;
}

#wyp-selector-editor::placeholder{
  color:rgba(255,255,255,0.5) !important;
}

#wyp-selector-editor.selector-is-invalid{
    color:#e48080 !important;
}

#autocomplate-selector-list {
    margin-top: 0px;
    padding: 8px 5px;
    min-height: 0;
    list-style-type: none;
    background: #262626;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23);
    border-radius: 0 0 6px 6px;
}

#autocomplate-selector-list:empty{
    display:none;
}

body.wyp-selector-editor-active #selector-editor-box,body.wyp-selector-editor-active #selector-editor-background{
    display: block;
}

#autocomplate-selector-list li {
    list-style-type: none;
    padding: 4px 5px;
    color: #9c9c9c;
    cursor: pointer;
    border-radius: 50px;
    margin-bottom: 3px;
}

#autocomplate-selector-list li.active{
    background-color: #E9E9E9;
    background-color: rgba(255, 255, 255, 0.1);
    color: #b7b7b7;
}

#autocomplate-selector-list li:hover{
    background-color: #E9E9E9;
    background-color: rgba(255, 255, 255, 0.1);
    color: #b7b7b7;
}

.selector-editor-notice {
    color: #ececec;
    font-size: 13px;
    margin: 0px 0 10px 0;
    font-weight: 400;
    text-shadow: 0 0 1px #000000;
}

.co-in-bo {
    position: relative;
}

.iris-color-preview{
  position:relative;
  cursor: pointer;
pointer-events: auto;
}

.iris-color-preview.active{
  border:1px solid #F12F2F;
}

.iris-color-preview div{
position: absolute;
top: 5px;
left: -9px;
width: 100%;
height: 100%;
border-radius: 2px;
width: 48px;
height: 3px;
background-color: #F12F2F;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
}

.co-sw-co {
  pointer-events: none;
  z-index: 2147483645;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  vertical-align: middle;
  background-position: -80px 0;
  cursor: text;
  padding: 0;
  margin: 0;
  display: inline-block;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.10);
}

.wyp-color-background{
  z-index: 2147483645;
  width: 50px;
  height: 20px;
  display: block;
  border-radius: 4px;
  cursor: pointer;
  position: relative !important;
}

body.wyp-bg-layer-active .wyp-color-background.active,
body.wyp-bg-layer-active .mo-i.active{
    z-index: 2147483647;
}

body.wyp-bg-layer-active .ui-autocomplete-input.active{
  z-index: 2147483647;
  position:relative;
}

#property-responsive-menu .pr-res-ite[data-responsive-size="all"][data-info="-"]{
  display:none;
}

.wyp-background-image-show {
    width: auto;
    height: auto;
    max-height:100px;
    margin-top: 6px;
    border-radius: 8px;
    background-color: #eaeaea;
}

.op-c {
    font-size: 0;
}

.op-c:after, .op-c:before {
    clear: both;
    content: "";
    display: block;
}

body.wyp-ani-cre .animation-option{
    pointer-events:none;
}

body.wyp-ani-cre .mo-i{
  display:none !important;
}

.wyp-add-animation-link{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='.85' viewBox='0 0 506.5 508'%3E%3Cpath d='M326.6 28C243 28 175 78.7 175 141c0 67.4 71.7 210 151.6 210s151.6-142.6 151.6-210c0-62.3-68-113-151.6-113z' fill='%23fff'/%3E%3Cpath d='M381.9 351c4.6 0 8.5 4.573 8.5 9.878v33.11H262.9v-33.11c0-5.4 3.9-9.878 8.5-9.878z' fill='%23cbdbe8'/%3E%3Cpath d='M326.6 322.9c-58.8 0-123.4-127.7-123.4-181.9 0-46 56.5-84.8 123.4-84.8S450 95.1 450 141c0 54.2-64.5 181.9-123.4 181.9z' fill='%2372b7e1'/%3E%3Cpath d='M326.6 0c-99.2 0-179.8 63.4-179.8 141.2 0 47.6 34.1 138.4 87.9 193.1v134.6c0 21.5 16.5 39.1 36.7 39.1h110.5c20.2 0 36.7-17.5 36.7-39.1V334.3c53.8-54.7 87.9-145.5 87.9-193.1C506.4 63.4 425.8 0 326.6 0zm14.1 30.5c33 10.5 58.7 57 58.7 110.8 0 66.7-30.3 172.9-58.7 202.2zm-28.2 0v313c-28.4-29.4-58.7-135.6-58.7-202.2 0-53.9 25.7-100.3 58.7-110.8zM175 141.2c0-43 32.5-80.4 80.1-99.5-18.2 25.5-29.5 60.7-29.5 99.5 0 40 14.8 129.3 43.6 186.5-53.9-43.2-94.2-136-94.2-186.5zm215.3 327.7c0 5.9-3.9 10.8-8.5 10.8H271.4c-4.6 0-8.5-5-8.5-10.8v-36.2h127.4zm0-64.4H262.9v-46.3c19.6 13.3 41 21.3 63.7 21.3s44.1-8 63.7-21.3v46.3zm-6.2-76.7c28.8-57.2 43.6-146.5 43.6-186.5 0-38.8-11.3-74-29.5-99.5 47.6 19.1 80.1 56.5 80.1 99.5-.1 50.4-40.4 143.2-94.2 186.5z' fill='%231d5b96'/%3E%3Cpath d='M381.9 479.6c4.6 0 8.5-9.108 8.5-19.673v-65.94H262.9v65.94c0 10.747 3.9 19.673 8.5 19.673z' fill='%23cbdbe8'/%3E%3Cpath d='M38.8 59.4h77.6a14.1 14.1 0 1 0 0-28.2H38.8c-7.787 0-14.1 6.313-14.1 14.1s6.313 14.1 14.1 14.1zm122.1 232.9H83.3c-7.787 0-14.1 6.313-14.1 14.1s6.313 14.1 14.1 14.1h77.6a14.1 14.1 0 1 0 0-28.2zm-55.1-124.7c.004-3.74-1.48-7.33-4.125-9.975A14.08 14.08 0 0 0 91.7 153.5H14.1c-7.787 0-14.1 6.313-14.1 14.1s6.313 14.1 14.1 14.1h77.6c3.74.004 7.33-1.48 9.975-4.125a14.08 14.08 0 0 0 4.125-9.975z' fill='%231d5b96'/%3E%3C/svg%3E");
    background-size: 36px !important;
    background-color: #CBDBE8 !important;
    border: 1px solid #A1B0D5 !important;
    background-position: 12px center !important;
    background-repeat: no-repeat !important;
    text-align: center !important;

}

body.wyp-ani-cre .wyp-add-animation-link{
  display:none;
}

.yellow-pencil-ready .anim-bar{
    display:block;
}

body.wyp-ani-cre .anim-bar {
    pointer-events:auto;
    opacity: 1;
    visibility:visible;
        -webkit-transform: scale(1);
                transform: scale(1);
}

body.wyp-ani-cre #font-family-group,body.wyp-ani-cre #font-style-group,body.wyp-ani-cre #text-decoration-group,body.wyp-ani-cre #text-transform-group,body.wyp-ani-cre #text-align-group,body.wyp-ani-cre #float-group,body.wyp-ani-cre #clear-group,body.wyp-ani-cre #overflow-group,body.wyp-ani-cre #background-image-group,body.wyp-ani-cre #background-repeat-group,body.wyp-ani-cre #background-attachment-group,body.wyp-ani-cre #background-image-group,body.wyp-ani-cre #display-group,body.wyp-ani-cre #position-group,body.wyp-ani-cre #cursor-group,body.wyp-ani-cre #pointer-events-group,body.wyp-ani-cre #direction-group,body.wyp-ani-cre #white-space-group,body.wyp-ani-cre #column-count-group,body.wyp-ani-cre .flex-container-section,body.wyp-ani-cre .flex-child-section,body.wyp-ani-cre .grid-section{
    opacity: 0.7 !important;
    cursor: default !important;
    pointer-events: none !important;
}

body.wyp-ani-cre .undo-btn,body.wyp-ani-cre .redo-btn,body.wyp-ani-cre .css-editor-btn,body.wyp-ani-cre .wyp-selector-mode,body.wyp-ani-cre .wyp-sharp-selector-btn,body.wyp-ani-cre .wyp-responsive-btn,body.wyp-ani-cre .animation-manager-btn {
    opacity: 0.7;
    cursor: default;
    pointer-events: none;
}

.undo-btn,.css-editor-btn,.wyp-ruler-btn{
    border-top: 1px solid #CCC;
}

body.wyp-animate-manager-active .undo-btn,body.wyp-animate-manager-active .redo-btn {
    opacity: 0.7;
    cursor: default;
    pointer-events: none;
}

.wyp-anim-scroll-shadow{
  opacity:0;
  transition: opacity 200ms ease;
  pointer-events:none;
}

.wyp-animate-manager.view-scrolled .wyp-anim-scroll-shadow{
  position: absolute;
  right: 0;
  height: 100%;
  top: 0;
  width: 30px;
  box-shadow: 14px 0 20px 0 rgb(0,0,0,0.3);
  opacity:1;
}

body.wyp-clean-look:not(.wyp-cln-lo-manual) .wyp-panel-show{
    display:none !important;
}

body.vsl-css-vi-active .wyp-panel-show{
    display:none !important;
}

body.wyp-res-mod .wyp-panel-show{
    right:0px !important;
}

.wyp-anim-recording {
    display: none;
}

body.wyp-ani-cre .wyp-anim-recording {
    display: inline-block;
    background: #f44336;
    color: #FFF;
    padding: 1px 4px;
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
    position: absolute;
    top:auto !important;
    left:auto !important;
    margin-top: -1px;
    margin-left: 4px;
}

body.wyp-ani-cre .animation-option {
    background: #f5e8e8;
}



.anim-bar {
    display: none;
    position: fixed;
    bottom: 7%;
    z-index: 100046;
    width: auto;
    pointer-events:none;
    opacity: 0;
    visibility:hidden;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    transition:opacity 200ms, -webkit-transform 200ms;
    transition:opacity 200ms, transform 200ms;
    transition:opacity 200ms, transform 200ms, -webkit-transform 200ms;
    transition-delay:100ms;

    background-color:#474747;
    border-radius:6px;
    box-shadow: 0px -10px 20px 0 rgb(0,0,0,0.2) !important;

    width:auto !important;
    height:auto !important;

    color:#E1E1E1;
}

.anim-bar-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 14px;
    background: #404040;
    border-radius:6px 6px 0 0;
    font-size: 14px;
    cursor: move;
}

.anim-bar .anim-icons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row-reverse;
}

.anim-bar .scenes {
    display: flex;
    padding: 14px;
}

.anim-bar .scenes .scene {
    background: #5b5b5b;
    width: 110px;
  height: 96px;
  display:flex;
  justify-content: center;
align-items: center;
    z-index: 100046;
  margin-right: 10px;
  position: relative;
  line-height: 11px;
  text-align: center;
  font-size: 13px;
  flex-shrink:0;
  border-radius:3px;
  border:2px solid transparent;
}

.anim-bar .scenes .scene input {
display: inline-block;
width: 38px;
text-align: center;
font-size: 11px;
margin-top: 12px;
background-color: rgba(255, 255, 255, 0.1);
border-width: 0;
color: #a6a6a6;
border-radius: 2px;
}

.anim-bar .scenes .scene.scene-active input{
	color:#f1f1f1;
}

.anim-bar .scene-add {
    display: flex;
    justify-content: center;
    align-items: center;
}

.anim-bar .scene-add:hover{
	color:#77c0ff;
}

.anim-bar .icon-plus{
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.scenes .scene-active{
    border-color:#4285F4 !important;
}




.scenes .scene .icon-trash {
    position: absolute;
    right: 2px;
    top: 2px;
    opacity: 0;
    color: #ee4c4c;
}

.scene:not(.scene-let-delete) .icon-trash,.scene-2 .icon-trash,.scene-1 .icon-trash {
    display: none !important;
}

.scenes .scene.scene-let-delete:hover .icon-trash {
    opacity: .8;
}

.scenes .scene.scene-let-delete:hover .icon-trash:hover{
    opacity: 1;
}

.scenes .scene .scene-info {
  color: #4ca3ee;
  display: none !important;
  font-size: 18px;
  position: absolute;
  left: 1px;
  bottom: 2px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.scenes .scene-active .scene-info{
    display:inline-block !important;
}

.scenes .scene p {
    margin: 0;
}

.scenes .scene-active p{
  color:#77c0ff;
}

.scenes .scene p span {
    display: block;
}

.anim-bar-title .wyp-anim-btn span {
    font-size: 24px;
    width: 24px;
    height: 24px;
    opacity: 0.9;
    cursor: pointer;
}

.anim-bar-title .wyp-anim-btn span:hover{
  color:#4ca3ee;
}

.anim-bar-title .wyp-anim-btn span.yicon.icon-flag {
    font-size: 19px;
    height: 19px;
    width: 19px;
}

.anim-bar-title .wyp-anim-btn span.yicon.icon-controls-play,
.anim-bar-title .wyp-anim-btn span.yicon.icon-controls-pause {
    margin-left: 2px;
    margin-right: 4px;
}

.anim-bar-title .wyp-anim-btn span.yicon.icon-no-alt{
  font-size: 27px;
  width: 27px;
  height: 27px;
}

.anim-bar-title .wyp-anim-btn span.yicon.icon-no-alt:hover{
  color:#da4747;
}

.anim-bar-title .wyp-anim-btn span.yicon.icon-controls-play:hover{
  color:#4CA3EE;
}


.wyp-animate-test-playing .scenes{
    pointer-events:none !important;
    cursor:wait !important;
}

.scenes .scene-add,.scenes .scene-6 {
    margin-right: 0 !important;
}



body.wyp-ani-cre #ac-pl-background-position .ui-autocomplete {
    max-height: 130px !important;
}

.ui-helper-hidden-accessible {
    display: none !important;
}

.no-aiming-icon {
    background-size:17px;
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    display: inline-block;
    position: relative;
    left: 1px;
}

.wyp-single-inspector-active .no-aiming-icon,.wyp-flexible-inspector-active .no-aiming-icon{
    display: none;
}

.aiming-icon {
    background-size: 22px 22px;
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    display: inline-block;
}

.aiming-icon, .inspector-sublist-default:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47.36 45.77'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23434343;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.4px;stroke-dasharray:8.99 8.99;%7D.cls-2%7Bfill:%23007dbb;%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-1' d='M33.38,29c-13,18.39-41-1.17-28.22-19.68C18.11-9.11,46.16,10.45,33.38,29Z'/%3E%3Cpath class='cls-2' d='M47.21,38.39l-15.94-15h0a.66.66,0,0,0-.19-.09h-.32a.52.52,0,0,0-.18.15v0a.48.48,0,0,0-.1.23V45.3a.48.48,0,0,0,.07.23v0a.55.55,0,0,0,.19.15h0a.5.5,0,0,0,.52-.1l6.45-6.43H46.9a.48.48,0,0,0,.46-.48A.48.48,0,0,0,47.21,38.39Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.wyp-single-inspector-active .aiming-icon,body:not(.wyp-flexible-inspector-active) .aiming-icon{
    display: none;
}

.css-editor-icon {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.8 38.99' fill='none' stroke='%23434343' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.8'%3E%3Cpath d='M9.2 11.53l-7.8 7.7 7.92 8.23m24.28.02l7.8-7.7-7.93-8.23M30.7 1.4L12.13 37.6'/%3E%3C/svg%3E");
  background-size: 22px 22px;
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    display: inline-block;
}

.design-information-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M.42 27.3l15.34 6a.74.74 0 0 0 .48 0l1.76-.7a.67.67 0 0 0 .11.45c.2.28 4.9 7 10.88 7s10.68-6.67 10.88-7a.66.66 0 0 0 0-.76c-.16-.24-3.4-4.82-7.88-6.4V6.67a.66.66 0 0 0-.42-.62l-15.33-6a.57.57 0 0 0-.48 0l-15.34 6a.66.66 0 0 0-.42.62v20a.68.68 0 0 0 .42.62zm.9-19.65l14 5.48V31.7l-14-5.48zm37.17 25c-1.06 1.37-5 6-9.5 6s-8.44-4.63-9.5-6c1.06-1.38 5-6 9.5-6s8.44 4.65 9.5 6.03zm-9.5-7.3c-4.14 0-7.66 3.2-9.5 5.25l-2.82 1.1V13.12l14-5.48V25.5a8.45 8.45 0 0 0-1.67-.17zM16 1.38l13.5 5.3L16 12 2.5 6.67zm8.67 31.3A4.67 4.67 0 1 0 29.33 28a4.66 4.66 0 0 0-4.66 4.67zm4.66-3.34A3.34 3.34 0 1 1 26 32.67a3.35 3.35 0 0 1 3.33-3.34zm0 5.34a2 2 0 1 0-2-2 2 2 0 0 0 2 2zm0-2.67a.67.67 0 1 1-.66.67.67.67 0 0 1 .66-.67z'/%3E%3C/svg%3E");
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    display: inline-block;
    background-size: 22px 22px;
}

.setting-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8.72' fill='%23737373'%3E%3Ccircle cx='20' cy='4.36' r='4.36'/%3E%3Ccircle cx='35.64' cy='4.36' r='4.36'/%3E%3Ccircle cx='4.36' cy='4.36' r='4.36'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  width: 24px;
  height: 12px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
}

.responsive-icon{
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    display: inline-block;
}

body.node-has-other-screen-edits .wyp-responsive-btn.active .responsive-icon:after{
  opacity: 1;
  position: absolute;
  right: 9px;
  top: 10px;
  width: 6px;
  height: 6px;
  background-color: rgba(21, 146, 230, 0.8);
  border-radius: 30px;
  content: " ";
}

.leftbar-button .responsive-icon{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.8 41.82'%3E%3Cg fill='none' stroke='%23434343' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M33.65,9.2V2.53A1.13,1.13,0,0,0,32.52,1.4h-30A1.14,1.14,0,0,0,1.4,2.53h0V39.28a1.14,1.14,0,0,0,1.14,1.14H18' stroke-linecap='round'/%3E%3Cpath d='M22.86 16.2v23A1.14 1.14 0 0 0 24 40.35h16.3a1.14 1.14 0 0 0 1.11-1.15h0V16.13A1.14 1.14 0 0 0 40.29 15h0l-16.3.06a1.13 1.13 0 0 0-1.14 1.13z'/%3E%3C/g%3E%3Ccircle cx='32.52' cy='34.55' fill='%23434343' r='1.95'/%3E%3C/svg%3E");
    background-size:20px 20px;
}

.navigation-icon{
  width: 24px;
  background-repeat: no-repeat;
  background-position: center;
  height: 24px;
  display: inline-block;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M39.383 21.055l.008.016-18.75 11.25-.012-.02c-.187.113-.395.2-.633.2a1.21 1.21 0 0 1-.629-.199l-.012.02L.605 21.07l.008-.02C.254 20.832 0 20.453 0 20a1.25 1.25 0 0 1 1.25-1.25c.25 0 .445.082.633.195l.008-.016L20 29.793 38.11 18.93l.008.02c.188-.113.398-.2.633-.2.69.004 1.25.563 1.25 1.25 0 .453-.254.836-.617 1.055zm0-7.5l.008.02-18.75 11.25-.012-.02c-.187.113-.395.2-.633.2a1.21 1.21 0 0 1-.629-.199l-.012.02-18.75-11.25.008-.02C.254 13.336 0 12.953 0 12.5s.254-.832.617-1.055L.61 11.43 19.37.195C19.56.082 19.766 0 20 0s.44.082.633.195l.012-.02 18.75 11.25-.008.02c.375.22.613.602.613 1.055s-.254.836-.613 1.05zM20 2.707L3.68 12.5 20 22.293 36.32 12.5zM1.25 26.25c.25 0 .445.082.633.195l.008-.02L20 37.293l18.11-10.867.008.023c.188-.117.398-.2.633-.2A1.25 1.25 0 0 1 40 27.5c0 .453-.254.832-.617 1.055l.008.016-18.75 11.25-.012-.016c-.187.113-.395.19-.633.19s-.44-.078-.63-.19l-.012.016L.605 28.57l.008-.02C.254 28.332 0 27.953 0 27.5a1.25 1.25 0 0 1 1.25-1.25zm0 0' fill='%23434343'/%3E%3C/svg%3E");
}

.wireframe-icon{
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    display: inline-block;
}

.leftbar-button .wireframe-icon{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 41'%3E%3Cstyle%3E%3C!%5BCDATA%5B.D%7Bstroke-linejoin:round%7D%5D%5D%3E%3C/style%3E%3Cg fill='none' stroke='%23434343' class='D'%3E%3Cpath d='M2.07,2.07H38.93V38.93H2.07Z'/%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M14.35,38.93V2.07m12.3,36.86V2.07'/%3E%3Cpath d='M2.07,14.35H38.93M2.07,26.65H38.93'/%3E%3C/g%3E%3C/g%3E%3Cg stroke='%23434343' stroke-width='2' class='D'%3E%3Ccircle cx='14.35' cy='14.35' r='1.57'/%3E%3Ccircle cx='26.65' cy='14.35' r='1.57'/%3E%3Ccircle cx='14.35' cy='26.65' r='1.57'/%3E%3Ccircle cx='26.65' cy='26.65' r='1.57'/%3E%3Ccircle cx='2.07' cy='2.07' r='1.57'/%3E%3Ccircle cx='14.35' cy='2.07' r='1.57'/%3E%3Ccircle cx='26.65' cy='2.07' r='1.57'/%3E%3Ccircle cx='38.93' cy='2.07' r='1.57'/%3E%3Ccircle cx='38.93' cy='38.93' r='1.57'/%3E%3Ccircle cx='38.93' cy='14.35' r='1.57'/%3E%3Ccircle cx='38.93' cy='26.65' r='1.57'/%3E%3Ccircle cx='26.65' cy='38.93' r='1.57'/%3E%3Ccircle cx='14.35' cy='38.93' r='1.57'/%3E%3Ccircle cx='2.07' cy='38.93' r='1.57'/%3E%3Ccircle cx='2.07' cy='26.65' r='1.57'/%3E%3Ccircle cx='2.07' cy='14.35' r='1.57'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 19px 19px;
}

.sharp-selector-icon {
    background-size: 22px 22px;
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    display: none;
    opacity: 0.95;
}

.sharp-selector-icon, .inspector-sublist-single:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47.4 47.4'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23434343;stroke-miterlimit:10;stroke-width:2.7px;%7D.cls-2%7Bfill:%23007dbb;%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Ccircle class='cls-1' cx='20.18' cy='20.09' r='18.03'/%3E%3Cline class='cls-1' x1='20.38' x2='20.38' y2='8.24'/%3E%3Cline class='cls-1' x1='40.22' y1='20.21' x2='31.96' y2='20.21'/%3E%3Cline class='cls-1' y1='20.21' x2='8.28' y2='20.21'/%3E%3Cline class='cls-1' x1='20.4' y1='40.19' x2='20.4' y2='31.93'/%3E%3Cpath class='cls-2' d='M47.26,40,31.31,25h0a.44.44,0,0,0-.18-.09h-.32a.34.34,0,0,0-.18.15v0a.53.53,0,0,0-.11.24V46.93a.49.49,0,0,0,.08.24v0a.58.58,0,0,0,.19.15h0a.46.46,0,0,0,.51-.11l6.46-6.42h9.18a.47.47,0,0,0,.32-.81Z'/%3E%3Ccircle class='cls-1' cx='20.53' cy='19.99' r='5.32'/%3E%3C/g%3E%3C/svg%3E");
}

.wyp-single-inspector-active .sharp-selector-icon {
    display: inline-block;
}

.ruler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 48.15'%3E%3Cpath d='M1 1v46.15h40V31.77H16.4V1H1z' fill='transparent'/%3E%3Cg fill='none' stroke='%23434343' stroke-linejoin='round' stroke-width='2.7'%3E%3Cpath d='M1 1v46.15h40V31.77H16.4V1H1z'/%3E%3Cpath d='M7.15 36.38h-4.6m4.6-6.15h-4.6m4.6-6.15h-4.6m4.6-12.3h-4.6M24.08 41v4.62M17.92 41v4.62M30.23 41v4.62M11.77 41v4.62m-4.62-27.7h-4.6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
    background-size:20px 20px;
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    display: inline-block;
}

.animation-manager-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.12 46.05'%3E%3Cpath d='M38.14 20.12L6.33 1.75a3.36 3.36 0 0 0-5 2.91V41.4a3.35 3.35 0 0 0 5 2.9l31.8-18.37a3.35 3.35 0 0 0 0-5.81z' fill='none' stroke='%23434343' stroke-linejoin='round' stroke-width='3.2'/%3E%3C/svg%3E");
  background-size: 19px 19px;
  width: 24px;
  background-repeat: no-repeat;
  background-position: center;
  height: 24px;
  display: inline-block;
}

.undo-icon,.redo-icon {
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 32 32' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' fill='%23626262'%3E%3Cpath d='m1.999 13c0 0.31 0.149 0.574 0.37 0.757l-9e-3 0.011 12 10 9e-3 -0.011c0.173 0.144 0.387 0.243 0.631 0.243 0.553 0 1-0.447 1-1v-4.959c5.484 0.419 9.998 4.249 11.467 9.369 0.091 0.318 0.173 0.639 0.238 0.965 0.039 0.189 0.076 0.379 0.106 0.569 0.08 0.513 0.144 1.028 0.163 1.559 1.281-2.209 2.024-4.767 2.024-7.503 0-7.947-6.184-14.432-13.999-14.949v-5.051c0-0.553-0.448-1.001-1-1.001-0.243 0-0.458 0.099-0.631 0.243l-9e-3 -0.011-12 10 9e-3 0.011c-0.22 0.183-0.369 0.448-0.369 0.758zm12.001-7.865v3.865c0 0.551 0.448 1 1 1v8e-3c7.176 0 12.994 5.815 12.994 12.993 0 0.171-0.014 0.337-0.02 0.505-2.591-4.485-7.423-7.506-12.974-7.506-0.552 0-1 0.448-1 1.001v3.863l-9.437-7.864 9.437-7.865z' clip-rule='evenodd' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    display: inline-block;
    background-size: 22px 22px;
}

.redo-icon {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

.redo-btn.disabled,.undo-btn.disabled{
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events:none;
}

.animation-manager-empty {
    font-size: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    margin: -30px 0 0 -300px;
    font-weight: 400;
    text-align: center;
    display: none;
    height: 60px;
}

.animation-manager-empty small {
    display: block;
    margin-top: 10px;
    color: rgba(174, 174, 174, 0.8);
}

.wyp-animate-manager {
    position: fixed;
    top:auto !important;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #111111;
    z-index: 9999999;
    font-size: 0;
    background-color: #404040;
    box-shadow: 0 -10px 20px 0 rgb(0, 0, 0, 0.2);
    display: none;
    color:#AEAEAE;
}

body .hidden-option {
    pointer-events: none !important;
    opacity: .7 !important;
}

body .hidden-option .wyp-after input {
    color: transparent !important;
}

.wyp-anim-left-part-column {
    width: 285px;
    float: left;
    z-index: 9999999;
    position: relative;
    left:0;
    background-color: #4B4B4B;
}

.wyp-anim-right-part-column {
    width: calc(100% - 285px);
    float: left;
    position: relative;
    padding-top: 0;
}

.wyp-anim-control-left {
    width: 285px;
    float: left;
    padding-top: 25px;
}

.wyp-anim-control-right {
    width: calc(100% - 285px);
    float: left;
    position: relative;
    padding-top: 25px;
}

.wyp-animate-manager-inner {
    overflow-y: scroll;
    overflow-x: scroll;
}

.wyp-anim-controls {
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.31);
    background: rgba(0,0,0,0.14);
}

.wyp-anim-control-overflow {
    overflow: hidden;
}

.wyp-anim-el-column {
    position: relative;
    font-weight: 500;
    font-size: 12px;
    width: 100%;
    display: inline-block;
    z-index:2147483647;

    padding: 11px 8px 0 26px;
    border-right: 1px solid rgba(0,0,0,0.31);
    border-bottom: 1px solid rgba(0,0,0,0.31);
    height: 63px;
}

.wyp-anim-process-bar-area {
    width: 100%;
    display: inline-block;
    background-color: #4B4B4B;
    border-bottom: 1px solid rgba(0,0,0,0.31);
    height: 63px;
    vertical-align: top;
    padding-left: 5px;
    position: relative;
}

.wyp-anim-process-bar {
    background: rgba(0,0,0,0.43);
    display: block;
    float: left;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    margin-top: 11px;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    z-index: 99;
    min-width: 20px !important;
}

.wyp-anim-process-bar .animation-name{
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
    font-weight: 500;
}

.wyp-anim-process-bar-delay {
    background: #884f4f;
    background-image: url(../../assets/pattern_7.png);
    color: #FFF;
    display: block;
    float: left;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    margin-top: 11px;
    text-transform: uppercase;
    text-align: center;
}

.wyp-animate-manager .ui-resizable-e {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    cursor: e-resize;
    position: absolute;
}

.wyp-animate-manager .ui-resizable {
    position: relative;
}

.cursor-main-btn{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3.001' height='3' viewBox='0 0 3.001 3'%3E%3Cpath d='M-447-132v-1h1v-1h1v-1h1v3Z' transform='translate(447 135)' fill='%234d4d4d'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 90% 90%;
}

.wyp-anim-metric {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    display: block;
    padding-top: 7px;
    padding-left: 3px;
    width: 6500px;
}

.second {
    width: 100px;
    height: 7px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    top: 11px;
    display: inline-block;
}

.second i {
    width: 10px;
    height: 3px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
}

.second b {
    position: absolute;
    right: -11px;
    top: -14px;
    width: 20px;
    font-size: 11px;
    text-align: center;
    font-weight: 500;
}

.wyp-delay-zero {
    z-index: 9999 !important;
    position: absolute !important;
}

.wyp-anim-el-column label {
  padding: 1px 4px 1px;
  border-radius: 5px;
  border: 1px dashed rgba(255, 255, 255, 0.38);
  opacity: 0.8;
  color: #FFF;
  font-weight: 400;
  text-transform: capitalize;
  font-size: 11px;
  margin-left: 5px;
}

.wyp-device-responsive {
    font-weight: 500;
    display: block;
    font-size: 11px;
    margin-top: 4px;
}

.wyp-type-anim-text{
    position: absolute;
    left: calc(100vw - 90px);
    top: 10px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    width: 60px;
    text-align: right;
}

.wyp-anim-manager-control {
    position: absolute;
    width: 280px;
    left: 5px;
    height: 25px;
    top: 0;
    z-index: 999999;
    border-right: 1px solid #464646;
    padding-left: 16px;
}

.wyp-anim-control-btn {
    cursor: pointer;
    margin-right: 8px;
    position: relative;
    top: 1px;
}

.wyp-anim-control-play:hover{
    color: #4CA3EE;
}

.wyp-anim-control-pause:hover, .wyp-anim-control-close:hover{
    color: #da4747;
}

.wyp-anim-control-btn span {
    font-size: 24px;
}

.wyp-anim-control-close span{
    font-size: 26px;
    top: -1px;
    position: relative;
}

.wyp-animate-manager-playing .wyp-anim-control-play{
    display:none;
}

body:not(.wyp-animate-manager-playing) .wyp-anim-control-pause{
    display:none;
}

.wyp-anim-playing-border {
    height: 100%;
    background-color: #4CA3EE;
    width: 2px;
    position: absolute;
    left: -1px;
    top: 0;
    z-index: 99999999;
}

body:not(.wyp-animate-manager-playing) .wyp-anim-playing-border{
  display:none;
}

.wyp-anim-control-right .wyp-anim-playing-border {
    margin-left: -2px;
}

.wyp-anim-playing-over {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 99999999;
    display: none;
    cursor: wait;
}

.wyp-animate-manager-playing .wyp-anim-playing-over {
    display: block;
}

.wyp-anim-playing-border.active {
    -webkit-animation-name: playingBorder;
    animation-name: playingBorder;
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
/* Chrome, Safari, Opera */
    animation-timing-function: linear;
}

.wyp-anim-process-inner {
    display: inline-block;
}

.wyp-anim-add {
    position: relative;
    display: inline-block;
    top: 1px;
    right: -12px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 48 48' version='1.1' viewBox='0 0 48 48' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234CA3EE'%3E%3Cpath d='m24 0c-13.255 0-24 10.746-24 24 0 13.255 10.745 24 24 24s24-10.744 24-24c0-13.254-10.745-24-24-24zm0.029 43.844c-11.023 0-19.959-8.936-19.959-19.958s8.936-19.96 19.959-19.96c11.022 0 19.959 8.936 19.959 19.959s-8.936 19.959-19.959 19.959z'/%3E%3Cpath d='m32.56 21.902h-6.458l8e-3 -6.576c-0.026-0.454-0.221-1.354-1.331-1.356l-1.579-2e-3c-1.181-1e-3 -1.282 1.165-1.288 1.47l-8e-3 6.463h-6.607c-1.22 0-1.323 0.941-1.328 1.21v1.809c6e-3 0.247 0.107 1.178 1.328 1.178h6.602l-8e-3 6.602c-2e-3 1.219 0.939 1.324 1.209 1.33l1.809 2e-3c0.247-6e-3 1.178-0.107 1.18-1.326l8e-3 -6.607h6.581c0.454-0.027 1.354-0.223 1.354-1.333v-1.578c-1e-3 -1.181-1.167-1.28-1.472-1.286z'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    background-size: 22px;
}

.wyp-anim-process-bar .animate-part-icons {
    position: absolute;
    left: 0;
    padding: 4px 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: none;
    top: 20px;
    background: #343434;
}

.wyp-anim-process-bar .animate-part-icons span {
    font-size: 14px;
    line-height: 12px;
}

.wyp-anim-process-bar-area:hover .animate-part-icons {
    display: block;
}

.wyp-anim-process-bar .animate-part-icons.wyp-control-trash {
    left: 0;
}

.wyp-anim-has-zero-delay .animate-part-icons.wyp-control-trash {
    left: 10px;
}

.wyp-anim-current-duration {
    position: absolute;
    top: 5px;
    right: 0;
    font-size: 14px;
    font-weight: 500;
    color: #4CA3EE;
    padding-right: 10px;
}

body.wyp-animate-manager-active .ed-pnl {
    display: none !important;
}

.wyp-animate-manager-inner{
    height: calc(100% - 26px) !important;
}

.wyp-anim-list-menu {
    display: none;
    position: fixed;
    z-index: 2147483647;
    width: auto;
    max-width:280px;
    min-width:170px;
    top: 0;
    left: 0;
    margin-top: 34px;
    padding: 4px 0;
    height: auto;

    background-color: #595959;
    font-size: 12px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23);
    border-radius: 6px;
    overflow:hidden;
    padding-top:0;
}

.wyp-anim-list-menu ul {
    padding: 0;
    list-style-type: none;
    margin: 0;
    max-height: 290px;
    height: 290px;
    overflow-y: scroll;
}

.wyp-anim-list-menu li {
    cursor: pointer;
    padding: 6px 12px;
    color: #dedede;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.wyp-anim-list-menu li:hover {
    background-color: rgba(0,0,0,0.1);
}

.wyp-anim-list-menu li.anim-cat-list {
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    color: #a2a2a2;
    pointer-events: none;
    font-size: 11px;
    margin-top: 6px;
    font-weight: 500;
}

.wyp-anim-list-menu li.anim-cat-list:first-child {
    margin-top: 0px;
}

.wyp-anim-list-menu:not(.wyp-anim-list-top):after,.wyp-anim-list-menu:not(.wyp-anim-list-top):before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.wyp-anim-list-menu:not(.wyp-anim-list-top):after {
    border-color: rgba(255,255,255,0);
    border-bottom-color: #595959;
    border-width: 8px;
    margin-left: -8px;
}

.wyp-anim-list-top {
    margin-top: -312px !important;
}

.wyp-anim-list-top ul {
    height: auto !important;
}

.wyp-anim-list-top:after,.wyp-anim-list-top:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.wyp-anim-list-top:after {
    border-color: rgba(255,255,255,0);
    border-top-color: #595959;
    border-width: 8px;
    margin-left: -8px;
}

.wyp-anim-el-column.anim-active-row > span:not([class]) {
  color: #4ca3ee;
}

.wyp-animate-manager > .ui-resizable-handle:hover, .wyp-animate-manager > .ui-resizable-handle.active {
  border-bottom: 2px solid rgba(230, 40, 40, 0.85);
}


#scale-transform-value,#z-index-value,#translate-x-transform-value,#skew-x-transform-value,#skew-y-transform-value,#translate-y-transform-value,#opacity-value,#box-shadow-blur-radius-value,#box-shadow-spread-value,#box-shadow-horizontal-value,#box-shadow-vertical-value,#blur-filter-value,#grayscale-filter-value,#invert-filter-value,#contrast-filter-value,#hue-rotate-filter-value,#saturate-filter-value,#sepia-filter-value,#brightness-filter-value,#blur-backdrop-filter-value,#grayscale-backdrop-filter-value,#invert-backdrop-filter-value,#contrast-backdrop-filter-value,#hue-rotate-backdrop-filter-value,#saturate-backdrop-filter-value,#sepia-backdrop-filter-value,#brightness-backdrop-filter-value,#column-count-value{
    border-radius: 3px !important;
    border-right-width: 1px !important;
}

#rotatex-transform-value,#rotatey-transform-value,#rotatez-transform-value,#perspective-value{
    border-radius: 3px !important;
    border-right-width: 1px !important;
}

#border-type-group .op-l, #spacing-type-group .op-l, #transform-type-group .op-l, #filter-type-group .op-l, #motion-type-group .op-l, #background-type-group .op-l{
  display:none !important;
}

#border-type-group, #spacing-type-group, #transform-type-group, #filter-type-group, #motion-type-group, #background-type-group{
  padding:0px !important;
  margin-top:-2px !important;
  border-width:0px !important;
}

#border-type-group .ra label, #spacing-type-group .ra label, #transform-type-group .ra label, #filter-type-group .ra label, #motion-type-group .ra label, #background-type-group .ra label{
  border-radius: 0px !important;
  background-color: #f0f0f0 !important;
  border-color:#CFCFCF !important;
  text-align:center !important;
  padding: 9px 6px 9px !important;
  font-size: 0 !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#border-type-group .ra.active label, #spacing-type-group .ra.active label, #transform-type-group .ra.active label, #filter-type-group .ra.active label, #motion-type-group .ra.active label, #background-type-group .ra.active label{
  border-radius: 0px !important;
  background-color: #f5f5f5 !important;
  color: #555555 !important;
  border-bottom-color:#f5f5f5 !important;
}

#border-type-group .ra #border-type-all{
  border-left-width:0px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Cg fill='none' stroke='%23777' stroke-width='2'%3E%3Crect width='16' height='14' stroke='none'/%3E%3Crect x='1' y='1' width='14' height='12' fill='none'/%3E%3C/g%3E%3C/svg%3E") !important;
}

#border-type-group .ra #border-type-top{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Cg fill='none' stroke='%23a8a8a8' stroke-width='2'%3E%3Crect width='16' height='14' stroke='none'/%3E%3Crect x='1' y='1' width='14' height='12' fill='none'/%3E%3C/g%3E%3Crect width='16' height='2' fill='%23777'/%3E%3C/svg%3E") !important;
}

#border-type-group .ra #border-type-right{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Cg fill='none' stroke='%23a8a8a8' stroke-width='2'%3E%3Crect width='16' height='14' stroke='none'/%3E%3Crect x='1' y='1' width='14' height='12' fill='none'/%3E%3C/g%3E%3Crect width='14' height='2' transform='translate(16) rotate(90)' fill='%23777'/%3E%3C/svg%3E") !important;
}

#border-type-group .ra #border-type-bottom{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Cg fill='none' stroke='%23a8a8a8' stroke-width='2'%3E%3Crect width='16' height='14' stroke='none'/%3E%3Crect x='1' y='1' width='14' height='12' fill='none'/%3E%3C/g%3E%3Crect width='16' height='2' transform='translate(16 14) rotate(180)' fill='%23777'/%3E%3C/svg%3E") !important;
}

#border-type-group .ra #border-type-left{
  border-right-width:0px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Cg fill='none' stroke='%23a8a8a8' stroke-width='2'%3E%3Crect width='16' height='14' stroke='none'/%3E%3Crect x='1' y='1' width='14' height='12' fill='none'/%3E%3C/g%3E%3Crect width='14' height='2' transform='translate(2) rotate(90)' fill='%23777'/%3E%3C/svg%3E") !important;
}

#spacing-type-group .ra #spacing-type-margin,
#spacing-type-group .ra #spacing-type-padding,
#transform-type-group .ra #transform-type-move,
#transform-type-group .ra #transform-type-rotate,
#transform-type-group .ra #transform-type-skew,
#transform-type-group .ra #transform-type-extra,

#filter-type-group .ra #filter-type-color-adjustment,
#filter-type-group .ra #filter-type-color-effects,

#motion-type-group .ra #motion-type-animation,
#motion-type-group .ra #motion-type-transition,

#background-type-group .ra #background-type-background,
#background-type-group .ra #background-type-filter{
font-weight: 400 !important;
font-size: 13px !important;
text-transform: capitalize !important;
}

#spacing-type-group .ra.active label, #transform-type-group .ra.active label, #filter-type-group .ra.active label, #motion-type-group .ra.active label, #background-type-group .re.active label{
  color:#1592E6 !important;
}

#spacing-type-group .ra #spacing-type-padding,
#transform-type-group .ra #transform-type-move,
#filter-type-group .ra #filter-type-color-effects,
#motion-type-group .ra #motion-type-animation,
#background-type-group .ra #background-type-background{
  border-left-width:0px !important;
}

#spacing-type-group .ra #spacing-type-margin,
#transform-type-group .ra #transform-type-extra,
#filter-type-group .ra #filter-type-adjustment,
#motion-type-group .ra #motion-type-transition,
#background-type-group .ra #background-type-filter{
  border-right-width:0px !important;
}

.text-option h3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.01 14.02'%3E%3Cpath d='M.4 14c.35.13.6 0 .82-.38l1.42-3.43h6.72l1.42 3.43a.65.65 0 0 0 .6.38h.23a.7.7 0 0 0 .36-.36.7.7 0 0 0 0-.53L6.64.38A.56.56 0 0 0 5.93 0a.55.55 0 0 0-.35.35L0 13.08a.78.78 0 0 0 .39.92zM5.93 2.15l2.83 6.73H3.1z' fill='%234285F4'/%3E%3C/svg%3E");
}

.size-option h3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%234285F4'%3E%3Cpath d='M.5.5h13v13H.5Z'/%3E%3Cpath d='M11.2 2.8l-8.6 8.6'/%3E%3Cpath d='M11.4 2.8H8.5m2.7 0v2.9m-8.6 5.64h2.9m-2.9.07V8.5'/%3E%3C/svg%3E");
}

.spacing-option h3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.14 14.27'%3E%3Cpath d='M1,1.13v12H13v-12H1m-1-1H14v14H0Z' fill='%234285F4'/%3E%3Cpath d='M2.4 7.35h3.5' fill='none' stroke='%234285F4'/%3E%3Cg fill='%234285F4'%3E%3Cpath d='M6,8.23V6.48l1.16.87L6,8.22Z'/%3E%3Cpath d='M8,7.35,5.52,9.23V5.48L8,7.35Z'/%3E%3C/g%3E%3Cpath d='M9 7.8L13.78 3M9 10l4.8-4.8M9 12.17l4.8-4.82M12 13.92l1.75-1.75M9.4 13.92l4.37-4.38M9 5.6L13.78.8M9 3.42l3-3.07M9 1.67L10.28.35' fill='none' stroke='%234285F4'/%3E%3C/svg%3E");
}

.border-option h3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%234285F4'%3E%3Cpath d='M.6,0V14M4.66,4.83V14'/%3E%3Cpath d='M0,.6H14M4.16,4.67H14'/%3E%3C/svg%3E");
}

.border-radius-option h3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5.35 12.77H2.47A2.48 2.48 0 0 1 0 10.3h0V2.47A2.48 2.48 0 0 1 2.47 0h7.82a2.46 2.46 0 0 1 2.47 2.47h0v2.88h.83a.41.41 0 0 1 .41.41h0v2.47a.41.41 0 0 1-.41.42h-.84a4.54 4.54 0 0 1-4.1 4.1v.84a.41.41 0 0 1-.42.41H5.76a.41.41 0 0 1-.41-.41v-.83zm0-1.65a.41.41 0 0 1 .41-.41h2.48a.4.4 0 0 1 .41.4h0v.8a3.7 3.7 0 0 0 3.27-3.27h-.8a.41.41 0 0 1-.41-.41h0V5.77a.41.41 0 0 1 .4-.42h.83V2.47A1.65 1.65 0 0 0 10.3.82H2.47A1.64 1.64 0 0 0 .83 2.47v7.82a1.64 1.64 0 0 0 1.64 1.65h2.9zm6.18-3.3h1.65V6.18h-1.65zm-5.35 5.36h1.64v-1.65H6.18z' fill='%234285F4'/%3E%3C/svg%3E");
}

.animation-option h3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.09 22.22'%3E%3Cdefs%3E%3CclipPath id='A'%3E%3Cpath d='M6.37 12.1h6v11h-6z' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg fill='none' stroke='%234285F4'%3E%3Cpath d='M9.74,4.64l-.66.52'/%3E%3Cpath d='M14 11.1s-5.83.6-4.8-6l.06-.33a6.7 6.7 0 0 0 .41-1.16 8.54 8.54 0 0 1 .18-2c.38-1 .63-.9 1.28-1a2.15 2.15 0 0 1 1.95.61h0'/%3E%3C/g%3E%3Cg clip-path='url(%23A)'%3E%3Cpath d='M9.93 21.86a6.82 6.82 0 0 0 1.52-2.17 3.2 3.2 0 0 0-.09-3.14 7.23 7.23 0 0 0-2.31-1.68 16.43 16.43 0 0 0-2.66-1.39c-9.22-3.63-3.93 1.4-3.93 1.4' fill='none' stroke='%234285F4'/%3E%3C/g%3E%3Cg fill='none' stroke='%234285F4'%3E%3Cpath d='M0 18.68s8 .72 6.78-4.28-.2-5.67-.2-5.67l2.88-4.27'/%3E%3Cpath d='M1.36 8.2v-.3a2.23 2.23 0 0 1 .09-.39A5.79 5.79 0 0 1 3 5.89a5.18 5.18 0 0 1 3.52-1.28 10.17 10.17 0 0 1 2.81 0 6.12 6.12 0 0 0 1.91 0 2.26 2.26 0 0 0 1.91-1 2.24 2.24 0 0 0 .14-2.16c-.5-1-2.4-.83-2.4-.83'/%3E%3C/g%3E%3C/svg%3E");
}

.position-option h3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.01 16.19'%3E%3Cpath d='M7.25 1.15h-1.6V0h1.6zM4 4.1a.53.53 0 0 0 0 .74l6.3 6.33-1.06 1.08h2.9v-2.9l-1.08 1.08-6.3-6.33a.53.53 0 0 0-.77 0h0zM4.7 0H3.1v1.15h1.6zm4.5 1.67v.6h1.15v-.6A1.67 1.67 0 0 0 9.87.49 1.68 1.68 0 0 0 8.69 0H8.2v1.15h.48a.51.51 0 0 1 .51.51zm0 3.18h1.15v-1.6H9.2zM0 1.67v.6h1.15v-.6a.51.51 0 0 1 .51-.52h.48V0h-.48A1.66 1.66 0 0 0 0 1.67zm3.1 8.7h1.6V9.23H3.1zM14.34 5.8H7.8L9 7h5.4a.51.51 0 0 1 .51.51v7.05a.51.51 0 0 1-.51.52h-7a.51.51 0 0 1-.51-.52V9L5.66 7.83v6.7a1.67 1.67 0 0 0 1.66 1.67h7A1.67 1.67 0 0 0 16 14.52v-7a1.67 1.67 0 0 0-1.65-1.72zm-13.2 0H0v1.6h1.15zm0 2.9v-.35H0v.35a1.68 1.68 0 0 0 .49 1.17 1.66 1.66 0 0 0 1.17.49h.48V9.23h-.48a.51.51 0 0 1-.51-.51zm0-5.47H0v1.6h1.15z' fill='%234285F4'/%3E%3C/svg%3E");
}

.extra-option h3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16.12'%3E%3Cpath fill='%239ed5fa' d='M13.73,3.65h0L7,7,.27,3.65,7,.27Z'/%3E%3Cg fill='transparent'%3E%3Cpath d='M13.73 3.7v8.75L7 15.84V7l6.7-3.37z'/%3E%3Cpath d='M7 7v8.8L.27 12.46v-8.8z'/%3E%3C/g%3E%3Cg fill='%234285F4'%3E%3Cpath d='M7 7.3a.27.27 0 0 1-.12 0L.14 3.88A.27.27 0 0 1 0 3.52a.25.25 0 0 1 .12-.11L6.88 0a.25.25 0 0 1 .24 0l6.73 3.38a.27.27 0 0 1 .12.36.23.23 0 0 1-.11.11h0L7.12 7.27A.27.27 0 0 1 7 7.3zM.87 3.65L7 6.73l6.13-3.08L7 .57z'/%3E%3Cpath d='M7,16.1a.27.27,0,0,1-.12,0L.15,12.7A.27.27,0,0,1,0,12.46V3.7a.26.26,0,0,1,.25-.28.27.27,0,0,1,.29.25V12.3L7,15.54l6.46-3.24V3.7a.26.26,0,0,1,.26-.28.27.27,0,0,1,.28.25v8.78a.28.28,0,0,1-.15.24L7.12,16.07A.27.27,0,0,1,7,16.1Z'/%3E%3Cpath d='M7 16.1a.32.32 0 0 1-.2-.1.22.22 0 0 1-.08-.2V7a.28.28 0 0 1 .55 0v8.8a.28.28 0 0 1-.08.2.22.22 0 0 1-.2.08z'/%3E%3C/g%3E%3C/svg%3E");
}


.ed-pnl .ed-pnl-list > li.text-option > h3{
  background-size: 12px auto;
  background-position: 17px center;
}

.ed-pnl .ed-pnl-list .extra-option:not(.active) h3{
    border-bottom-width: 0px !important;
}

.ed-pnl .ed-pnl-list > li.active .op-g:last-child{
    border-bottom-width: 0px !important;
}

.box-shadow-option h3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15.01'%3E%3Cpath d='M13.44 12.08a7.59 7.59 0 0 0 1-1.6h0a7.54 7.54 0 0 0 0-5.93h0a7.59 7.59 0 0 0-1-1.6h0a7.5 7.5 0 1 0 0 9.2zM7.8 4.93h1.32v1.32H7.8zm0 3.8h1.32v1.32H7.8zm0-.6V6.83h1.32v1.32zm1.9-1.32H11v1.32H9.7zm1.9 0h1.32v1.32H11.6zm1.9 0h.88v.66a3.65 3.65 0 0 1 0 .66h-.88zm.4-1.9a6.65 6.65 0 0 1 .38 1.32h-.8v-1.3zm-.4-.6v-.26l.14.26zm-.6 1.9H11.6v-1.3h1.32zm-1.93 0H9.7v-1.3H11zm-1.3-1.9V.93a6.29 6.29 0 0 1 1.32.6v2.8zm-.58 0H7.8V.58a7.48 7.48 0 0 1 1.32.18zm-1.32 6.3h1.32v3.57a6.67 6.67 0 0 1-1.32.19zm1.9 0H11v2.8a6.29 6.29 0 0 1-1.3.57zm0-.6v-1.3H11v1.32zm1.9-1.32h1.32v1.33H11.6zm1.9 0h.8a5.89 5.89 0 0 1-.38 1.28h-.4zm.14 1.9a2.15 2.15 0 0 1-.14.26v-.26zm-.73-7.44v1.13H11.6v-2.4a6.72 6.72 0 0 1 1.32 1.29zM.58 7.5A7 7 0 0 1 7.21.57V14.4A7 7 0 0 1 .58 7.49zm11 5.57v-2.42h1.32v1.13a6.72 6.72 0 0 1-1.32 1.29z' fill='%234285F4'/%3E%3C/svg%3E");
}

.filter-option h3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='18' r='17' fill='transparent'/%3E%3Cpath d='M28,36A18,18,0,1,1,46,18,18,18,0,0,1,28,36ZM28,2A16,16,0,1,0,44,18,16,16,0,0,0,28,2Z' fill='%234285F4'/%3E%3Ccircle cx='18' cy='38' r='17' fill='transparent'/%3E%3Cpath d='M18,56A18,18,0,1,1,36,38,18,18,0,0,1,18,56Zm0-34A16,16,0,1,0,34,38,16,16,0,0,0,18,22Z' fill='%234285F4'/%3E%3Ccircle cx='38' cy='38' r='17' fill='transparent'/%3E%3Cpath d='M38,56A18,18,0,1,1,56,38,18,18,0,0,1,38,56Zm0-34A16,16,0,1,0,54,38,16,16,0,0,0,38,22Z' fill='%234285F4'/%3E%3Cpath d='M28,24.27h0a16.94,16.94,0,0,0-16.44-2,17,17,0,0,0,10,11.45A17,17,0,0,1,28,24.27Z' fill='%239ed5fa'/%3E%3Cpath d='M21.56 34.72a1.06 1.06 0 0 1-.38-.07 18.12 18.12 0 0 1-10.59-12.13 1 1 0 0 1 .59-1.17 17.9 17.9 0 0 1 17.41 2.12 1 1 0 0 1 0 1.61A16.11 16.11 0 0 0 22.53 34a1 1 0 0 1-.97.75zm-8.78-11.84a16.12 16.12 0 0 0 8.15 9.46 18.07 18.07 0 0 1 5.37-8 15.9 15.9 0 0 0-13.52-1.46z' fill='%234285F4'/%3E%3Cpath d='M28,35a16.9,16.9,0,0,1-6.45-1.28,17,17,0,0,0,6.45,18,17,17,0,0,0,6.45-18A16.9,16.9,0,0,1,28,35Z' fill='%239ed5fa'/%3E%3Cpath d='M28,52.73a1,1,0,0,1-.59-.2A18,18,0,0,1,20,38a18.33,18.33,0,0,1,.58-4.53,1,1,0,0,1,.52-.64,1,1,0,0,1,.83,0,16,16,0,0,0,12.14,0,1,1,0,0,1,.83,0,1,1,0,0,1,.52.64A18.33,18.33,0,0,1,36,38a18,18,0,0,1-7.41,14.53,1,1,0,0,1-.59.2ZM22.27,35.06A16,16,0,0,0,28,50.47a16,16,0,0,0,5.73-15.41,18,18,0,0,1-11.46,0Z' fill='%234285F4'/%3E%3Cpath d='M38,21a16.91,16.91,0,0,0-10,3.27h0a17,17,0,0,1,6.44,9.45,17,17,0,0,0,10-11.45A17,17,0,0,0,38,21Z' fill='%239ed5fa'/%3E%3Cpath d='M34.44 34.72a1 1 0 0 1-.97-.75 16.11 16.11 0 0 0-6.06-8.89 1 1 0 0 1 0-1.61 17.9 17.9 0 0 1 17.41-2.12 1 1 0 0 1 .59 1.17 18.14 18.14 0 0 1-10.59 12.13 1.06 1.06 0 0 1-.38.07zM29.7 24.34a18.07 18.07 0 0 1 5.37 8 16.12 16.12 0 0 0 8.15-9.46 15.9 15.9 0 0 0-13.52 1.46z' fill='%234285F4'/%3E%3Cpath d='M28,35a16.9,16.9,0,0,0,6.45-1.28A17,17,0,0,0,28,24.27a17,17,0,0,0-6.45,9.45A16.9,16.9,0,0,0,28,35Z' fill='%239ed5fa'/%3E%3Cpath d='M28,36a17.81,17.81,0,0,1-6.83-1.35,1,1,0,0,1-.59-1.18,18,18,0,0,1,6.83-10,1,1,0,0,1,1.18,0,18,18,0,0,1,6.83,10,1,1,0,0,1-.59,1.18A17.81,17.81,0,0,1,28,36Zm-5.23-2.88a16,16,0,0,0,10.46,0A16,16,0,0,0,28,25.53a16,16,0,0,0-5.23,7.59Z' fill='%234285F4'/%3E%3C/svg%3E");
}

.transform-option h3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 60'%3E%3Cg fill='%234285F4'%3E%3Cpath d='M47 20a1 1 0 0 1-1-1 17 17 0 0 0-34 0 1 1 0 0 1-2 0 19 19 0 0 1 38 0 1 1 0 0 1-1 1zM29 60a1 1 0 0 1-1-1V17a1 1 0 0 1 2 0v42a1 1 0 0 1-1 1z'/%3E%3Cpath d='M47.34 20.22a1 1 0 0 1-.58-.19l-4.87-3.5a1 1 0 0 1 1.17-1.62l4.86 3.5a1 1 0 0 1-.58 1.82z'/%3E%3Cpath d='M47.34 20.22a1 1 0 0 1-.81-1.59h0L50 13.76a1 1 0 0 1 1.63 1.17l-3.48 4.87a1 1 0 0 1-.81.42z'/%3E%3C/g%3E%3Cpath d='M1,21,21,38,1,55Z' fill='transparent'/%3E%3Cpath d='M1 56a1 1 0 0 1-1-1V21a1 1 0 0 1 1-1 1 1 0 0 1 .65.24l20 17a1 1 0 0 1 .11 1.41l-.1.1-20 17A1 1 0 0 1 1 56zm1-32.84v29.68L19.46 38z' fill='%234285F4'/%3E%3Cpath d='M57,21,39,38,57,55Z' fill='%239ed5fa'/%3E%3Cpath d='M57 56a1 1 0 0 1-.69-.27l-18-17a1 1 0 0 1 0-1.42h0l18-17A1 1 0 0 1 58 21v34a1 1 0 0 1-1 1zM40.46 38L56 52.68V23.32z' fill='%234285F4'/%3E%3C/svg%3E");
}

.lists-option h3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.75 3.44A1.73 1.73 0 0 0 3.5 1.72 1.73 1.73 0 0 0 1.75 0 1.73 1.73 0 0 0 0 1.72a1.73 1.73 0 0 0 1.75 1.72zm0 10.56a1.73 1.73 0 0 0 1.75-1.72 1.7 1.7 0 0 0-1.7-1.72h-.05a1.72 1.72 0 1 0 0 3.44zm0-1.15a.58.58 0 1 1 .58-.58.59.59 0 0 1-.58.58zm0-4.13a1.72 1.72 0 1 0 0-3.44 1.72 1.72 0 1 0 0 3.44zm0-1.15A.57.57 0 1 1 2.33 7a.59.59 0 0 1-.58.58zm3.5 5.28h8.17c.58 0 .58 0 .58-.57s0-.57-.58-.57H5.25c-.58 0-.58 0-.58.57s0 .57.58.57zM1.75 2.3a.59.59 0 0 1-.58-.57.59.59 0 0 1 .58-.58.59.59 0 0 1 .58.58.59.59 0 0 1-.58.57zm3.5 5.28h8.17c.58 0 .58 0 .58-.57s0-.58-.58-.58H5.25c-.58 0-.58 0-.58.58s0 .57.58.57zm0-5.28h8.17c.58 0 .58 0 .58-.57s0-.58-.58-.58H5.25c-.58 0-.58 0-.58.58s0 .57.58.57z' fill='%234285F4'/%3E%3C/svg%3E");
}

.background-option h3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M11 0H3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3zM4.36 7.9l1.5-1.5 1.8 1.8-1.5 1.5L8 11.5 9.46 10l1.8 1.8-1.45 1.46h-.2L7.9 11.5l-1.7 1.7H6l-1.73-1.68-1.63 1.65a3.23 3.23 0 0 1-.51-.17L1 11.87a2 2 0 0 1-.14-.47L2.5 9.75.8 8.05v-.18l1.73-1.74L.78 4.4v-.13L2.26 2.8l1.8 1.8-1.5 1.5zm8.86 3.1a2.11 2.11 0 0 1-.39 1.26L1.74 1.17A2.16 2.16 0 0 1 3 .77h8A2.21 2.21 0 0 1 13.22 3zM2.52 9.72l1.8-1.8 1.8 1.8-1.8 1.8z' fill='%234285F4'/%3E%3C/svg%3E");
}

.fake-layer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    border-width: 0;
    z-index: 100;
    background: transparent;
    cursor: default !important;
}

.fake-layer-x{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    border-width: 0;
    z-index: 9999996;
    background: transparent;
    cursor: default;
}

.advanced-info-box {
    position: absolute;
    top: 296px;
    left: 44px;
    background-color: #FFFFFF;
    z-index: 9999;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px 2px 10px 0 rgba(0,0,0,0.23);
    border-radius:6px;

    font-size: 0;
    display: none;
}

.wyp-fix-leftbar .advanced-info-box,
.wyp-fix-leftbar #layer-tree{
  left:42px;
}

.advanced-info-box-inner {
    min-height:360px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.advanced-info-box-menu {
    background-color: #E7E7E7;
    overflow: hidden;
    height: 31px;
    border-radius: 6px 6px 0 0;
}

.advance-info-btns {
    background-color:transparent;
    color: #474747;
    padding: 9px 16px;
    display: inline-block;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}

.advance-info-btns.active {
    background-color: #F9F9F9;
}

.advanced-info-box-content {
    font-size: 12px;
    padding: 0;
    color: #656565;
    padding-bottom: 20px;
}

.advanced-info-box-content ul li:last-child {
    border-width: 0;
}

.advanced-info-box-content h3,.advanced-info-box-content ul {
    margin: 0;
}

.advanced-info-box-content h3 {
    margin-top: 20px;
    margin-bottom: 8px;
    color: #585858;
}

.advanced-info-box-content ul {
    padding-left: 0;
}

.advanced-info-box-content h3 {
    margin-left: 20px;
    border-top: 2px solid rgba(0,0,0,0.1);
    padding-top: 16px;
    margin-top: 4px;
    font-weight: 500;
}

.advanced-info-box-content > h3:first-child,.advanced-info-box-content h3.no-top {
    border-top-width: 0;
}

.advanced-info-box-content ul li {
    list-style-type: none;
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-left: 20px;
    clear: both;
    text-transform: capitalize;
}

.advanced-info-box-content ul li:after,.advanced-info-box-content ul li:before {
    clear: both;
    content: ' ';
    display: block;
}

.typo-list-left {
    float: left;
}

.typo-list-right {
    float: right;
    margin-right: 20px;
}

.typo-list-right span {
    color:#696969;
    text-transform: lowercase;
    display: inline-block;
    text-align: right;
}

.info-color-scheme-list {
    font-size: 0;
    margin-left: 20px;
    margin-right: 20px;
    opacity: .9;
    position:relative;
}

.info-color-scheme-list div {
    height: 30px;
    display: inline-block;
    position: relative;
    cursor:pointer;
}

.info-color-scheme-list div:after {
    content: ' ';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: rgba(0,0,0,0.2);
}

.info-color-scheme-list > div:hover{
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1) inset;
    height: 38px;
    position: relative;
    top: 8px;
    margin-top: -8px;
}

.info-color-scheme-list > div:hover:after{
    height:4px;
}


.info-element-class-list li {
    color: rgba(25, 96, 73, 0.8);
    font-weight: 500;
    text-transform: lowercase !important;
}

.info-element-class-list li:hover{
    cursor:pointer;
    text-decoration:underline;
}

.info-no-element-selected {
    text-align: center;
    width: 70%;
    margin: 34px auto;
    line-height: 23px;
    font-size: 14px;
}

.info-image-list{
  margin-left:20px;
  line-height:0px;
  margin-bottom: 12px;
}

.info-image-list img{
    display: inline;
    height:30px;
    max-width: 60px;
    border: 1px solid #c8c8c8;
    margin-right: 4px;
    margin-bottom: 4px;
    border-radius: 3px;
}

.page-assets-h3{
  margin-top:16px !important;
}

.info-image-list img:last-child {
    margin-left: 0px;
}

.info-element-dom {
    margin-left: 20px;
    width: calc(100% - 40px);
    background-color: transparent;
    color: inherit;
    border: 2px solid rgba(0,0,0,0.2);
    resize: vertical;
    height: 92px;
    font-size:14px;
    border-radius:6px;
}

.ed-pnl-list li.border-radius-option.active > h3 .wyp-arrow-icon,.ed-pnl-list li.spacing-option.active > h3 .wyp-arrow-icon {
    right: 60px !important;
}

body.wyp-mouseleave .metric-left-tooltip,body.wyp-mouseleave .metric-top-tooltip,body.wyp-mouseleave .metric-left-border,body.wyp-mouseleave .metric-top-border {
    display: none !important;
}

body.wyp-if-movleav:not(.wyp-res-mod) .metric-left-tooltip,body.wyp-if-movleav:not(.wyp-res-mod) .metric-top-tooltip,body.wyp-if-movleav:not(.wyp-res-mod) .metric-left-border,body.wyp-if-movleav:not(.wyp-res-mod) .metric-top-border {
    display: none !important;
}

.info-element-selector-list li {
    text-transform: none !important;
}

.wyp-anim-process-inner:empty + .wyp-anim-add {
    position: relative;
    top: 17px;
}

.yp-yellow-pencil-demo-mode #wordpress-panel-btn{
    display:none !important;
}

.dom_contextmenu{
    margin-top:0px !important;
    background-color:#7e7e7e !important;
}

.dom_contextmenu li{
    color: #FFFFFF !important;
}

.dom_contextmenu li.hover{
    background-color:#6e6e6e !important;
}

.dom_contextmenu li.disabled{
    color: rgba(255,255,255,0.4) !important;
    cursor:default !important;
}

.dom_contextmenu li.disabled span{
    cursor:default !important;
}

.breakpoint-contextmenu{
    top: 19px !important;
}

#breakpoint-css{
    width: 100%;
    height: 340px;
    text-align: left;
}


/* ---------------------------------------------------- */
/* YP CSS GRADIENT GENERATOR                            */
/* ---------------------------------------------------- */
.wyp-gradient-section{
    margin-top: 6px;
    display:none;
    width:100%;
}

#iris-gradient-color{
    display:none;
}

.wyp-gradient-section .iris-picker{
    margin-top: 3px;
    margin-left:-3px;
    position: absolute;
    z-index: 2147483647;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0px 4px 20px 0 rgba(0,0,0,0.3);
}

.wyp-gradient-section .iris-picker:before,.wyp-gradient-section .iris-picker:after{
  display:none !important;
}

.wyp-gradient-orientation{
    width:100%;
    height:60px;
    margin-top:0px;
    box-shadow: inset 1px 1px 10px rgba(0,0,0,0.4);
    border-radius: 2px;
    position:relative;
}

.wyp-gradient-pointer:hover, .wyp-gradient-pointer.ui-draggable-dragging{
    box-shadow: 0 0 0 3px rgba(0,0,0,0.20);
}

.wyp-gradient-pointer.focus{
    box-shadow: 0 0 0 3px rgba(0,0,0,0.20);
}

.wyp-gradient-space{
  height:8px;
}

.wyp-gradient-orientation i{
    width: 12px;
    height: 12px;
    border: 2px solid #FFF;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23);
    display:inline-block;
    margin-left:-6px;
    margin-top:-6px;
    top:50%;
    left:50%;
    cursor: move;
}

.wyp-gradient-orientation b{
    position: absolute;
    font-size: 10px !important;
    color: #FFF;
    text-transform: uppercase;
    display: block;
    bottom: 8px;
    right: 8px;
    font-weight: 500;
    pointer-events: none;
    opacity: 0.8;
}

.gradient-editor{
  background: #FFF;
  padding: 10px 10px;
  border-radius: 3px;
  border: 1px solid #C8C8C8;
  margin-bottom: 10px;
  box-shadow: 0 5px 3px -3px rgba(0, 0, 0, 0.14);
}

.wyp-gradient-bar{
    width:100%;
    height:24px;
    box-shadow: inset 1px 1px 10px rgba(0,0,0,0.2);
    border-radius: 3px;
}

.wyp-gradient-bar-background{
    width:100%;
    height:24px;
    position:relative;
    margin-bottom:8px;
    border-radius: 2px;
}

.wyp-gradient-bar-background,.wyp-gradient-pointer,.wyp-color-background,.info-image-list img,.wyp-theme-c,.cs-alpha-wrap{
    background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0H8V8H0Z' fill='%23ccc'/%3E%3Cpath transform='translate(8 8)' d='M0,0H8V8H0Z' fill='%23ccc'/%3E%3Cpath transform='translate(8)' d='M0,0H8V8H0Z'/%3E%3Cpath transform='translate(0 8)' d='M0,0H8V8H0Z'/%3E%3C/svg%3E") !important;
    background-size:8px 8px;
}

.wyp-gradient-pointer-area{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.wyp-gradient-pointer-area:not(.gradient-pointer-no-cursor){
    cursor:copy !important;
}

.gradient-pointer-no-cursor{
  pointer-events:none !important;
}

.gradient-pointer-no-cursor *{
  pointer-events:auto !important;
}

.wyp-gradient-pointer{
  width: 11px;
  height: 28px;
  margin-left:-5.5px;
  position: absolute;
  top: -2px;
  cursor: default;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.9);
}

.wyp-gradient-pointer.disable{
    display:none !important;
}

.wyp-gradient-pointer i{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #992323;
    border: 1px solid rgba(255,255,255,0.9);
    border-radius:3px;
}

.wyp-border-top-section,.wyp-border-right-section,.wyp-border-bottom-section,.wyp-border-left-section, .wyp-spacing-margin-section, .wyp-transform-rotate-section, .wyp-transform-skew-section, .wyp-transform-extra-section, .wyp-filter-color-adjustment-section, .wyp-motion-transition-section, .wyp-background-filter-section{
    display:none;
}

.focus-option{
    -webkit-animation-name:focusOption;
            animation-name:focusOption;
    -webkit-animation-duration:1.6s;
            animation-duration:1.6s;
    -webkit-animation-timing-function:ease-in;
            animation-timing-function:ease-in;
}

/* Focus Animation */
@-webkit-keyframes focusOption{
    0% {
        background-color:#e4e49e;
    }
    100% {
        background-color:transparent;
    }
}
@keyframes focusOption{
    0% {
        background-color:#e4e49e;
    }
    100% {
        background-color:transparent;
    }
}

.wyp-animate-test-playing .op-g{
    pointer-events:none !important;
    cursor:default !important;
    opacity:0.8 !important;
}


.anim-info-rule{
	display: inline-block;
	vertical-align: middle;
	width: 60%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-weight: 500;
	color: #e1e1e1;
}

.anim-info-value{
	display: inline-block;
	vertical-align: middle;
	width: 40%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.anim-info-border{
	display: block;
	border-bottom: 1px solid rgba(0, 0, 0, 0.14);
	margin-top: 3px;
	margin-bottom: 3px;
}

.anim-bar .popover {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(60,60,60,1);
}

.anim-bar .popover-content .anim-info-border:last-child{
    display:none !important;
}

.anim-bar .popover.top>.arrow {
  left: 50%;
  margin-left: -9px;
  border-bottom-width: 0;
  border-top-color: #5b5b5b;
  bottom: -8px;
}

.anim-bar .popover.top>.arrow:after {
  content: " ";
  bottom: 1px;
  margin-left: -8px;
  border-bottom-width: 0;
  border-top-color: #5b5b5b;
}

.anim-bar .popover-title{
    background-color: #474747 !important;
}

.anim-bar .popover-content{
    background-color:#5b5b5b !important;
    min-width:170px !important;
    color:#CACACA;

}

/* Resizable Conents, panels */
.ui-resizable-handle{
    z-index:2147483646 !important;
    position: absolute;
}

.wyp-animate-bar .ui-resizable-handle{
    z-index:2147483640 !important;
}

.advanced-info-box .ui-resizable-handle{
    right: -6px;
    top: 0px;
    width: 7px;
    height:100%;
    cursor: e-resize;
}

.ed-pnl .ui-resizable-handle.ui-resizable-w{
    left: -1px;
    top: 0px;
    width: 6px;
    height:100%;
    cursor: e-resize;
}

#leftAreaEditor .ui-resizable-e{
    right: -5px;
    top: 0px;
    width: 6px;
    height: 100%;
    cursor: e-resize;
}

#leftAreaEditor .ui-resizable-s{
    bottom: -3px;
    left: 0px;
    height: 6px;
    width: 100%;
    cursor: s-resize;
}

.wyp-animate-manager > .ui-resizable-handle{
    left: 0px;
    top: -6px;
    height: 7px;
    width: 100%;
    cursor: n-resize;
}

.wyp-animate-manager > .ui-resizable-handle{
    z-index:2147483646 !important;
}

.fake-layer-x-bg .editor-leftbar{
    z-index:10000 !important;
}

/* show list option only if element is list */
body:not(.wyp-element-list) .lists-option{
    display:none !important;
}

body.wyp-element-list .lists-option:not(.active) h3{
    background-color: #F2F2F8 !important;	
    border-bottom: 1px solid #E1E1E1 !important;	
    box-shadow: 0px -1px 0px 0px #E1E1E1 !important;
}

#c-t-list{
    color: #666666;
    background: #FFF;
    box-shadow: 0 2px 10px 0 rgb(0, 0, 0, 0.3);
    border-radius: 8px;
    z-index: 2147483647;
    position: absolute;
    left:0px;
    top:auto;
    width: 96%;
    padding: 0px;
    margin-top: 8px;
    margin-left: 2%;
    margin-right:2%;
    display:none;
}

body:not(.wyp-flex-container) .flex-container-section{
  display:none;
}

body:not(.wyp-flex-element) .flex-child-section{
  display:none;
}

body:not(.wyp-grid-element) .grid-section{
  display:none;
}

.flex-container-section, .flex-child-section, .grid-section{
  margin-top:10px;
  margin-bottom:6px;
  border-top:2px solid #dedede;
  border-bottom:2px solid #dedede;
  position:relative;
}

body.wyp-flex-container.wyp-flex-element .flex-container-section,
body.wyp-grid-element.wyp-flex-element .flex-child-section{
  margin-bottom:20px !important;
}

.flex-child-section{
  padding-top:6px !important;
}

.flex-child-section:before{
  margin-top:-6px !important;
}

.flex-container-section, .flex-child-section, .grid-section,.flex-container-section:hover, .flex-child-section:hover, .grid-section:hover{
  background-color:#f9f9f9 !important;
}

.flex-container-section:before, .flex-child-section:before, .grid-section:before{
  position: absolute;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  left: 50%;
  font-size: 12px;
  font-weight: 500;
  border: 2px solid #dedede;
  background-color: #FFFFFF;
  padding: 1px 10px;
  border-radius: 4px;
}

.flex-container-section:before{
  content: "Flex Container";
}

.flex-child-section:before{
  content: "Flex Child";
}

.grid-section:before{
  content: "Grid Container";
}

#c-t-list ul{
    list-style: none;
}

#c-t-list li{
    position:relative;
    padding-top: 13px;
    padding-bottom: 13px;
    padding-right:15px;
    cursor: pointer;
    border-bottom:1px solid #E1E8ED;
    padding-left: 33px;
}

#c-t-list li:first-child{
  border-radius:8px 8px 0 0;
}

.wyp-csng-sec #c-t-list li#wyp-current-page{
  border-radius: 0 0 8px 8px;
  padding: 10px 0;
  display:block;
}

.wyp-csng-sec #c-t-list li#wyp-current-page h6{
  text-align: center;
  color: #4285f4;
}

#wyp-current-page:hover,#wyp-current-page.active {
    background-color: #F1F8FD;
}

#c-t-list .reset-this-type,#c-t-list .manage-this-type{
    background-position: center;
    padding: 10px;
    border-radius: 3px;
    display: block;
    font-size: 0;
    width: 16px;
    height: 16px;
    background-size: 14px auto;
    background-repeat: no-repeat;
    position: absolute;
    opacity: 0.66;
    left: 7px;
    line-height: 0;
}

.empty-customization .reset-this-type,.empty-customization .manage-this-type{
  display:none !important;
}

#c-t-list li.type-disabled .reset-this-type, #c-t-list li.type-disabled .manage-this-type {
    opacity: 0;
    display:none;
}

li:not(.active-customizing-list) .manage-this-type,li:not(.active-customizing-list) .reset-this-type{
    transition:opacity 50ms;
}

li:not(.active-customizing-list):not(:hover) .manage-this-type,li:not(.active-customizing-list):not(:hover) .reset-this-type{
    opacity:0 !important;
}

#c-t-list .manage-this-type:hover, #c-t-list .reset-this-type:hover{
    background-color:rgba(0, 0, 0, 0.15);
}

#c-t-list .manage-this-type{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230c244d' viewBox='0 0 60.2 59.1'%3E%3Cpath d='M14.4 6.2V0H5.7v6.2a9.88 9.88 0 0 0-5.7 9 10 10 0 0 0 5.7 9.1v33.5h8.7V24.3a10 10 0 0 0 5.7-9.1 9.88 9.88 0 0 0-5.7-9zm-4.3 13.4a4.3 4.3 0 1 1 4.3-4.3 4.33 4.33 0 0 1-4.3 4.3zm44.4 1V0h-8.7v20.6a10.11 10.11 0 0 0 0 18.2v19.1h8.7V38.7a10 10 0 0 0 5.7-9.1 9.88 9.88 0 0 0-5.7-9zM50.1 34a4.3 4.3 0 1 1 4.3-4.3 4.27 4.27 0 0 1-4.3 4.3zm-15.7 5.9V0h-8.7v39.9A10.11 10.11 0 0 0 30 59.1h.06a10.07 10.07 0 0 0 10.1-10V49a10 10 0 0 0-5.76-9.1zm-4.3 13.4a4.3 4.3 0 1 1 4.3-4.3 4.33 4.33 0 0 1-4.3 4.3z'/%3E%3C/svg%3E");
    margin-top:-1px;
}

#c-t-list .reset-this-type{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230c244d' viewBox='0 0 383.28 323.2'%3E%3Cpath d='M222.18 0h-20.5a24.3 24.3 0 0 0 0 48.6h20.5a112.71 112.71 0 0 1 112.6 112.6v.8a112.6 112.6 0 1 1-225.2 0v-31.9h48.6c10.4 0 16.1-13.5 9.2-22.1C146 81.1 122.08 57.7 99 32.7a18.41 18.41 0 0 0-27.6 0C48.4 57.8 24.4 81.1 3 108c-6.8 8.6-1.2 22.1 9.2 22.1h48.7V162c0 88.9 72.3 161.2 161.2 161.2S383.3 250.9 383.3 162v-.8C383.38 72.3 311.08 0 222.18 0z'/%3E%3C/svg%3E");
    margin-top: 22px;
}

#c-t-list li:last-child{
    border-bottom-width:0px;
}

#c-t-list h6{
    display:inline-block;
    width:100%;
    font-size: 13px;
    color: #636363;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 3px;
    clear:both;
    position:relative;
}

#c-t-list .active-customizing-list{
  background-color:#F1F8FD;
}

#c-t-list li.active-customizing-list h6{
    color:#4285f4;
}

#c-t-list li h6 > span{
  max-width: 78%;
  display: inline-block;
}

#c-t-list p{
    font-weight: 400;
    line-height: 1.5;
    color: #707070;
    font-size: 12px;
    clear:both;
    width:80%;
}

#c-t-list:after, #c-t-list:before {
    bottom: 100%;
    left: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

#c-t-list:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 8px;
    margin-left: -8px;
}
#c-t-list:before {
    border-color: rgba(187, 187, 187, 0);
    border-bottom-color: #BBBBBB;
    border-width: 9px;
    margin-left: -9px;
}

.ed-pnl .wyp-csng-sec small.type-byte {
    float: right;
    color: #767676 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    margin-top: 1px;
    text-transform:capitalize;
    text-align:right;
    height:0;
}

#c-t-list li .current-type{
    background-color: #419BF9;
    width:6px;
    height:6px;
    border-radius: 100px;
    display: none;
    position: relative;
  top: -1px;
  margin-right: 6px;
}

#c-t-list li.active-customizing-list .current-type{
    display:inline-block;
}

#c-t-list li h6 i{
    display:none;
}

#c-t-list li:not(.type-disabled) *{
    cursor:pointer !important;
}

#c-t-list .customizing-type-updated h6 i{
    display: block;
    font-size: 11px;
    color: #767676;
    padding-bottom:2px;
    position:relative;
    top: 3px;
    font-style: normal;
}

.ed-pnl .wyp-csng-sec #customizing-mode span.yicon{
    position: relative;
    top: -3px;
    left: -5px;
    opacity: 0.60;
    font-size: 20px;
    height: 16px;
    width: 16px;
}

.ed-pnl .wyp-csng-sec #customizing-mode *{
    pointer-events: none;
}

.ed-pnl .wyp-csng-sec #customizing-mode:hover > span.yicon,.ed-pnl .wyp-csng-sec #customizing-mode.active > span.yicon{
    opacity:0.82;
}

.type-disabled{
    cursor:default !important;
    opacity:0.7 !important;
    display:none !important;
}

.wyp-type-menu-link.focus{
    -webkit-animation-name:focusType;
            animation-name:focusType;
    -webkit-animation-duration:600ms;
            animation-duration:600ms;
    -webkit-animation-timing-function:ease-in;
            animation-timing-function:ease-in;
    border-radius:4px;
}

/* Focus Animation */
@-webkit-keyframes focusType{
    0% {
        background-color:rgba(243,243,153, 0.6);
    }
    100% {
        background-color:transparent;
    }
}
@keyframes focusType{
    0% {
        background-color:rgba(243,243,153, 0.6);
    }
    100% {
        background-color:transparent;
    }
}

.left-menu-sublist{
    position: absolute;
    top: 10px;
    left: 44px;
    background-color: #EAEAEA;
    width: 175px;
    padding: 6px 0;

    background: #FFF;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px 2px 10px 0 rgba(0,0,0,0.23);
}

.wyp-fix-leftbar .left-menu-sublist{
  left:42px;
}

.left-menu-sublist ul{
  list-style-type:none;
    padding:0px;
    margin:0px;
}

.left-menu-sublist ul li{
    color:#474747;
    font-size:12px;
    padding-top:6px;
    padding-bottom:6px;
    padding-left:42px;
    cursor:pointer;
    position:relative;
}

.left-menu-sublist ul li.active:before{
    content: "";
    background-color: #56ADE8;
    width: 6px;
    height: 6px;
    position: absolute;
    top: calc(50% - 3px);
    left: 8px;
    border-radius: 50px;
}

.left-sublist-border{
  border-bottom:1px solid #E9E9E9 !important;
  padding:0px !important;
  pointer-events:none !important;
  margin-top:6px !important;
  margin-bottom:6px !important;
}

.inspector-sublist-cursor:after, .no-aiming-icon{
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M20.84,16.14l-17-16h0a.49.49,0,0,0-.2-.1H3.5a.5.5,0,0,0-.2,0h0A.49.49,0,0,0,3.11.2l0,.05A.49.49,0,0,0,3,.5v23a.49.49,0,0,0,.08.25l0,.05a.49.49,0,0,0,.2.16h0a.5.5,0,0,0,.55-.11L10.71,17H20.5a.5.5,0,0,0,.34-.86Z' fill='%23595959'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.inspector-sublist-default:after, .inspector-sublist-single:after, .inspector-sublist-cursor:after{
    content: "";
    width: 14px;
    height: 14px;
    position: absolute;
    top: calc(50% - 7px);
    left: 23px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    background-size: 100%;
}

.inspector-sublist-single{
    margin-left:1px;
}

.left-menu-sublist ul li:hover{
    background-color:rgba(21, 146, 230, 0.15);
}

.inspector-sublist{
    display:none;
}

.wyp-gradient-list{
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  border-radius: 3px;
}

.wyp-gradient-list,.wyp-unsplash-list{
    display: flex;
    flex-wrap: wrap;
    background-color: #FFFFFF;
    border: 1px solid #C8C8C8;
    border-radius: 0px 0px 3px 3px;
    height: 241px;
    overflow-y: scroll;
    box-shadow: 0 5px 3px -3px rgba(0, 0, 0, 0.14);
    position: relative;
}

.wyp-unsplash-list{
  height:289px;
}

@media (max-height:864px){

    .wyp-gradient-list,.wyp-unsplash-list{
        height:181px;
    }

}

.wyp-gradient-demo{
    margin: 0px;
    height: 30px;
    cursor: pointer;
    width: 100%;
    position: relative;
    font-size: 11px;
    padding-left: 40px;
    line-height: 30px;
    background-color: #FFF;
}

.wyp-gradient-demo:hover{
    background-color:#ECECEC;
}

.wyp-gradient-demo.active{
    background-color:#D9EEFE;
}

.wyp-gradient-demo span {
    height: 30px;
    width: 30px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.wyp-gradient-demo:last-child {
    border-bottom-width: 0px;
}

.uigradient-api,.unsplash-api{
    margin-top: 4px;
    font-size: 11px;
    color: #8d8b8b;
    text-align: right;
}

.uigradient-api a,.unsplash-api a{
    color:inherit;
}

#ed-elt-tr{
    display:none;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 30px;
    width:auto;
    background: linear-gradient(180deg,rgb(246, 246, 246) 0%, rgb(230, 230, 230) 100%);
    border-radius: 0 8px 0 0;
    overflow:hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px -2px 10px 0 rgba(0,0,0,0.23);
    z-index: 100150;
    font-size: 12px;
    line-height: 30px;
    color: #5d5d5d;
    transition: color 200ms, height 200ms, line-height 200ms;
    max-width:40% !important;
}

.wyp-fix-leftbar #ed-elt-tr{
  margin-left:44px;
  background:rgb(240, 240, 240) !important;
}

/* parent tree option visible */
.wyp-con-slcd #ed-elt-tr{
    display:block;
}

#ed-elt-tr:hover{
    color:#454545;
}

#ed-elt-tr ul{
    display:flex;
    margin-right:0px !important;
}

#ed-elt-tr ul, #ed-elt-tr li{
    padding:0;
    margin:0;
    list-style:none;
}

#ed-elt-tr li {
    display:flex;
    cursor: pointer;
    position:relative;
    min-width:0px;

    background-repeat: no-repeat;
    background-position: 15px 8px;
    padding-left: 18px;
    transition: flex 200ms ease 100ms, background-position 200ms;
}

#ed-elt-tr li span{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display:inline-block;
    padding-right: 12px;
}

#ed-elt-tr li.active {
    flex: 0 0 auto;
    padding-left:32px;
}

#ed-elt-tr > span{
    padding-left:16px;
}

#ed-elt-tr li:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 6px solid #EEEEEE;
  position: absolute;
  top: -1px;
  left: 100%;
  z-index: 2;
  transition: border-width 200ms ease;
}

#ed-elt-tr li:before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 6px solid #a9a9a9;
  position: absolute;
  top: -1px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
  transition: border-width 200ms ease;
}

#ed-elt-tr li.active,#ed-elt-tr li.active:hover{
    background-color:#FFFFFF;
}

#ed-elt-tr li.active:after,#ed-elt-tr li.active:hover:after{
    border-left-color:#FFFFFF;
}

#ed-elt-tr li:hover{
    background-color:#d6d6d6;
    flex: 0 0 auto;
}

#ed-elt-tr li:hover:after{
    border-left-color:#d6d6d6;
}

#ed-elt-tr li:last-child:after,#ed-elt-tr li:last-child:before{
  display:none !important;
}

body.wyp-animate-manager-active #ed-elt-tr{
    display:none !important;
}

#vsl-css-vi{
    position:fixed;
    top:0;
    right:0;
    left:auto !important;
    width:276px;
    z-index: 2147483648;
    height:100%;

    background-color:#262626;
    font-size:12px;
    box-shadow: -10px 0 20px 0 rgba(0, 0, 0, 0.2);

    border-left: 1px solid #000;

    display:none !important;
}

body.vsl-css-vi-active #vsl-css-vi{
    display:block !important;
}

.view-information{
    text-align: center;
    padding: 20px 50px;
    margin: 0px;
    color: #999999;
    font-size: 12px;
    line-height: 18px;
}

#layer-tree .ui-resizable-handle.ui-resizable-e{
  right: -6px;
  top: 0px;
  width: 7px;
  height: 100%;
  cursor: e-resize;
}

#vsl-css-vi .ui-resizable-handle.ui-resizable-w{
    left: -1px;
    top: 0px;
    width: 6px;
    height: 100%;
    cursor: e-resize;
}

#vsl-css-vi .ui-resizable-handle.ui-resizable-w:hover, #vsl-css-vi .ui-resizable-handle.ui-resizable-w.active{
    border-left: 2px solid rgba(230, 40, 40, 0.85);
}

#vsl-css-co{ /* view top */
    height:calc(100% - 40px);

    overflow-x: hidden;
    overflow-y: auto;
    position:relative;
}

.css-view-top{
    height:40px;
    display:flex;
    border-bottom: 1px solid #151515;
    background: #333;
}

.css-view-top span.yicon{
  color: #FFF;
  position: absolute;
  left: 7px;
  top: 10px;
  opacity: 0.2;
  pointer-events: none;
}

#vsl-css-vi.view-scrolled .css-view-top{
    box-shadow: 0 15px 25px 0px rgb(0,0,0,0.3);
    position:relative;
    z-index:100;
}

#visual-rule-filter{
    border-width: 0px;
    color: #A6A6A6;
    padding-right: 11px;
    line-height: 14px;
    font-size: 13px;
    width: 100%;
    height:40px;

    padding-left: 34px;

    background-color: transparent;
    border-right: 1px solid #151515;
    border-bottom: 1px solid transparent;
}

.visual-manager-close{
    cursor: pointer;
    text-decoration: none;
    background-size: 11px;
    width: 54px;
    height: 40px;
    display: inline-block;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.6;
    font-size: 0px;
}

#view-no-item{
    position: absolute;
    top: 6%;
    text-align: center;
    width: 230px;
    color: #999999;
    padding: 0px 24px;
    left: 50%;
    margin-left: -115px;
}

#view-no-item span{
    width: 32px;
    height: 32px;
    display: inline-block;
    background-position:center;
}

#view-no-item span:not(.view-hand-icon){
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m232 264-86.582-86.582c-0.78309-0.78309-1.4179-2.3072-1.4179-3.4197v-27.997c0-1.1055 0.90252-2.0017 2.0049-2.0017h219.99c1.1073 0 2.0049 0.88926 2.0049 2.0017v27.997c0 1.1055-0.62592 2.6349-1.4018 3.4197l-85.598 86.582v69.999c0 1.105-0.55029 2.7196-1.2112 3.5829l-45.359 59.244c-1.342 1.7528-2.4299 1.3794-2.4299-0.8228v-132z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    background-repeat: no-repeat;
    margin-bottom: 10px;
    background-size:60px;
}

#view-no-item span.view-hand-icon{
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239d9d9d'%3E%3Cpath d='M22.85,19.15l-5.39-5.39a1,1,0,0,0,.54-.87V10.81a1,1,0,1,0-2,0v1.49l-.15-.15a.5.5,0,0,0-.85.35v10a.5.5,0,0,0,.31.46.49.49,0,0,0,.19,0,.5.5,0,0,0,.35-.15L18.71,20H22.5a.5.5,0,0,0,.35-.85Z'/%3E%3Cpath d='M7.69,16H5.62a1,1,0,0,0,0,2H7.69a1,1,0,1,0,0-2Z'/%3E%3Cpath d='m12.88 16h-2.07a1 1 0 1 0 0 2h2.08a1 1 0 0 0 0-2z'/%3E%3Cpath d='m2.5 16a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1h1a1 1 0 0 0 0-2z'/%3E%3Cpath d='m1.5 8.69a1 1 0 0 0 1-1v-2.07a1 1 0 0 0-2 0v2.07a1 1 0 0 0 1 1z'/%3E%3Cpath d='m1.5 13.88a1 1 0 0 0 1-1v-2.07a1 1 0 1 0-2 0v2.08a1 1 0 0 0 1 0.99z'/%3E%3Cpath d='M2.5.5h-1a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0,1,1,0,0,0,0-2Z'/%3E%3Cpath d='M12.88.5H10.81a1,1,0,1,0,0,2h2.08a1,1,0,0,0,0-2Z'/%3E%3Cpath d='M7.69.5H5.62a1,1,0,0,0,0,2H7.69a1,1,0,0,0,0-2Z'/%3E%3Cpath d='m16 2.5a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1h-1a1 1 0 0 0 0 2z'/%3E%3Cpath d='m17 4.62a1 1 0 0 0-1 1v2.07a1 1 0 0 0 2 0v-2.07a1 1 0 0 0-1-1z'/%3E%3C/g%3E%3C/svg%3E");
    background-size:32px 32px;
    background-repeat: no-repeat;
    margin-bottom: 9px;
}

#view-no-item p{
    margin:0;
    padding:0;
    line-height:20px;
    font-size: 12px;
}

.visual-manager-close:hover{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1) inset;
}

.selector-group{
    margin:2px 0;
    margin-top: 0;
    padding-bottom:8px;
}

.selector-group.first-child {
    margin-top: 0px !important;
}

.selector-group.first-child .selector-heading {
    border-top-width:0px !important;
}

.selector-group:not(.selector-group-visible){
    display:none;
}

.selector-heading{
    padding: 8px 8px 8px 28px;
    margin-bottom: 2px;
    position:relative;
    background-color: #3e3e3e;
    line-height:12px;
}

.selector-group .selector-heading:before{
    color:#FFFFFF;
    speak: none;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute !important;
    right: 9px !important;
    top: 50% !important;
    -webkit-transform: translateY(-50%) !important;
            transform: translateY(-50%) !important;
    pointer-events: none;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-family: "wyp-ed" !important;
    text-decoration: inherit !important;
    font-weight: 400 !important;
    font-style: normal !important;
    vertical-align: top !important;
    text-align: center !important;
    opacity: .4 !important;
    content: "\e801";
}

.selector-group.focus .selector-heading:before{
    content: "\e81c";
}

.selector-content{
  display:none;
}

.selector-group.focus .selector-content{
  display:block;
}

.selector-group:not(.focus){
  padding-bottom:0px !important;
}

.selector-heading input{
    background-color:transparent;
    border:none;

    font-weight:500;
    color: #B0B0B0;
    font-size:inherit;
    padding:2px;
    line-height:1;
    width:100%;
    min-width:50px !important;
    max-width:100% !important;
}

.selector-heading span{
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 8px;
    z-index: 10;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
    transition:opacity 100ms ease;
}

.selector-heading span:hover{
    opacity:1;
}

.selector-group.active .selector-heading input{
    color: #73A7FF;
}

.selector-heading input:hover,.selector-heading input:active,.selector-heading input:focus {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1px;
    border-radius: 3px;
}

.selector-heading input:focus{
  border-color:#4285F4 !important;
}

.selector-group.active, .selector-group.focus{
  background-color: #333333;
}

.selector-view{
  margin-top:3px;
  display:block;
}

.css-rule-group{
    padding: 6px 10px;
}

.css-rule-view {
    margin-bottom: 1px;
}

.css-rule-view .rule-end{
    color:#939393;
}

.rule-checkbox{
    transition:opacity 20ms linear;
}

.selector-group:not(:hover) .rule-checkbox{
    opacity:0;
}

.view-rule{
    color:#6AA9B9;
}

.css-rule-view input.value-input {
    display:none;
    background-color: transparent;
    border-width: 0px;
    color: #939393;
    display: none;
    font-size: 12px;
    font-weight: 400;
    line-height:0;
    padding:0px 0px 0px 4px;
    max-width:100% !important;
    vertical-align: top;
	margin-top: -2px;
}

.css-rule-view input.value-input::-moz-selection{
    background-color: rgba(255, 255, 255, 0.14);
    color:#b0b0b0;
}

.css-rule-view input.value-input::selection{
    background-color: rgba(255, 255, 255, 0.14);
    color:#b0b0b0;
}

.css-rule-view input.value-input::-moz-selection{
    background-color: rgba(255, 255, 255, 0.14);
    color:#b0b0b0;
}

.view-rule-value{
    margin-left:4px;
    color:#9E9E9E;
    cursor:text;
    position:relative;
    border-bottom: 1px solid transparent;
    margin-top:1px;
}

.view-before-selector{
    display:flex;
    padding:6px 11px 6px 10px;
}

.css-rule-view{
    padding-right:6px;
    min-height: 16px;
}

.view-before-selector .source-view{
    color: #D48C8C;
    pointer-events:none;
}

#vsl-css-vi[data-current-type="single"] .selector-group[data-view-type="single"] .source-view{
    pointer-events:auto;
}

#vsl-css-vi[data-current-type="template"] .selector-group[data-view-type="template"] .source-view{
    pointer-events:auto;
}

#vsl-css-vi[data-current-type="global"] .selector-group[data-view-type="global"] .source-view{
    pointer-events:auto;
}

.view-before-selector .view-media-line {
    color: #00FFFF;
    opacity: 0.6;
    width:100%;
    cursor:pointer;
    padding-right:10px;
}

.disabled-media-line{
    cursor:default !important;
}

.view-rule-value:hover{
    border-bottom: 1px dashed;
}

.css-selector-open,.css-selector-close{
    color: #9E9E9E;
    padding-left: 10px;
    padding-right: 10px;
}

.view-before-selector .view-media-line:hover,.view-before-selector .source-view:hover,.css-selector-open .selector-view span:hover{
    text-decoration:underline;
    cursor:pointer;
}

body:not(.wyp-res-mod) .selector-group[data-view-size="desktop"] .view-media-line{
    pointer-events:none;
}

.css-selector-open .selector-view i{
    font-style:normal;
    padding-left:6px;
    display:inline-block;
}

.css-rule-view:last-child {
    margin-bottom: 0px;
}

.css-rule-view.view-rule-disabled .view-rule,.css-rule-view.view-rule-disabled .view-rule-value{
    text-decoration:line-through;
}

.css-rule-view.view-rule-disabled .view-rule-value:before{
    position: absolute;
    content: "";
    width: 4px;
    height: 1px;
    background-color: #939393;
    top: 9px;
    left: -4px;
}

.selector-group.view-children-group .selector-heading{
    display:none !important;
}

/* rule checkbox */
.css-rule-label {
    display: inline-block;
    position: relative;
    padding-left: 24px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.css-rule-label input {
    position: absolute;
    opacity: 0;
    left:-1000px;
}

.rule-checkbox {
    position: absolute;
    border: 1px solid #747474;
    border-radius: 100%;
    top: 5px;
    left: 10px;
    height: 6px;
    width: 6px;
}

.rule-checkbox:active{
    border-color:#4285f4;
    background-color:rgba(255,255,255,0.08);
}

.css-rule-label input:checked ~ .rule-checkbox {
  background-color: #4285f4;
  border-color: transparent;
}

.unavailable-view-group{
    opacity:0.7 !important;
}

.unavailable-view-group .selector-heading span,.unavailable-view-group .selector-view span{
    pointer-events:none !important;
}

#context-menu-layer{
    z-index:100046 !important;
}

.mo-i{
    display:none;
}

.property-responsive .mo-i{
    background-image: url("data:image/svg+xml,%3Csvg opacity='0.9' enable-background='new 0 0 12 16' version='1.1' viewBox='0 0 12 16' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,1c0-0.553-0.447-1-1-1H1C0.447,0,0,0.447,0,1v14 c0,0.553,0.447,1,1,1h10c0.553,0,1-0.447,1-1V1z M7.01,13.5c0,0.276-0.224,0.5-0.5,0.5h-1c-0.276,0-0.5-0.224-0.5-0.5v-1 c0-0.276,0.224-0.5,0.5-0.5h1c0.276,0,0.5,0.224,0.5,0.5V13.5z M10,10H2V2h8V10z' fill='%23FFF'/%3E%3C/svg%3E%0A");
    background-size: 9px 10px;
    width: 19px;
    height: 18px;
    display: inline-block;
    opacity: 1;
    position: absolute;
    background-color: rgba(21, 146, 230, 0.9);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 45px;
    cursor: pointer;
    transition: all 200ms;
    margin-left: -19px;
    vertical-align: middle;
    top: -1px;
    background-position: 5px center;
}

.ed-pnl .property-responsive .op-l span{
    margin-right:24px;
}

.ed-pnl #animation-name-group.property-responsive .op-l span {
  margin-left: 1px;
}

body:not(.wtfv) .wyp-lite{
    display:none !important;
}

.wyp-pro-label{
    display:none;
}

body.wtfv #font-family-group .wyp-lite.wyp-pro-label,
body.wtfv #color-group .wyp-lite.wyp-pro-label,
body.wtfv #background-image-group .wyp-lite.wyp-pro-label,
body.wtfv #background-color-group .wyp-lite.wyp-pro-label,
body.wtfv #width-group .wyp-lite.wyp-pro-label,
body.wtfv #height-group .wyp-lite.wyp-pro-label,
body.wtfv #animation-name-group .wyp-lite.wyp-pro-label{
    display:inline-block !important;
}

.wyp-lite.wyp-pro-label{
    font-style: normal;
    background-color: #f74a67;
    color: #FFFFFF;
    padding: 0px 2px 0 3px;
    border-radius: 4px;
    margin-right: 3px;
    font-size: 10px;
    line-height: 15px;
    cursor: pointer;
    text-indent: -17px;
    transition: all 200ms;
    overflow: hidden;
    vertical-align: top;
    font-weight:500;
}

.wyp-lite.wyp-pro-label:hover{
    text-indent: 0px;
    background-color:#C62E46;
}

.activate-pro{
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 9;
    padding: 4px;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    color: #7C889B;
    border-radius: 3px;
}

.activate-pro:hover{
    background-color:rgba(0,0,0,0.1);
}

.wyp-message-box{
  padding: 11px 11px 11px 46px;
  cursor: pointer;
  width: 265px;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400px;

  color: rgba(255,255,255,0.80);
  background-color: #494949;
  position: fixed;
  border-radius: 3px;
  z-index: 2147483647;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23);
  border-left: 3px solid #FFA500;
  opacity:0;
  transition:opacity 300ms;
}

.wyp-message-box:before{
  content: "\e81b";
  color:#FFA500;
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
  font-family: "wyp-ed";
  font-weight: 400;

  position: absolute;
  left: 11px;
  top: 10px;
}

.wyp-message-box b{
  display: block;
  font-weight: 500;
  color: #DFD993;
  padding-bottom: 3px;
  font-size: 13px;
}

.ace_scrollbar.ace_scrollbar-h{
  display:none !important;
}

.ace_tooltip{
    font-size:14px !important;
}

.css-code-unvalid #cssEditorBar .tooltip{
    display:none !important;
}

.unavailable-animate-bar{
    opacity:0.7 !important;
}

.wyp-anim-el-column > i{
    background-repeat: no-repeat;
    width: 13px;
    height: 13px;
    display: inline-block;
    margin-right: 4px;
    position: relative;
    top: 2px;
    cursor:pointer;
}

.wyp-anim-el-column > i,.selector-heading span{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg%3E%3Cg transform='translate(2 2)' fill='none' stroke='%23909090' stroke-width='2'%3E%3Crect width='9' height='9' stroke='none'/%3E%3Crect x='1' y='1' width='7' height='7' fill='none'/%3E%3C/g%3E%3Cline y2='3' transform='translate(6.5 -0.5)' fill='none' stroke='%23909090' stroke-width='1'/%3E%3Cline x2='3' transform='translate(-0.5 6.5)' fill='none' stroke='%23909090' stroke-width='1'/%3E%3Cline y2='3' transform='translate(6.5 10.5)' fill='none' stroke='%23909090' stroke-width='1'/%3E%3Cline x2='3' transform='translate(10.5 6.5)' fill='none' stroke='%23909090' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}

#ed-elt-tr li.active, .wyp-anim-el-column > i:hover,.wyp-anim-el-column.anim-active-row > i,body.wyp-con-slcd #wyp-crnt-el, .selector-group.active .selector-heading span{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg%3E%3Cg transform='translate(2 2)' fill='none' stroke='%234ca3ee' stroke-width='2'%3E%3Crect width='9' height='9' stroke='none'/%3E%3Crect x='1' y='1' width='7' height='7' fill='none'/%3E%3C/g%3E%3Cline y2='3' transform='translate(6.5 -0.5)' fill='none' stroke='%234ca3ee' stroke-width='1'/%3E%3Cline x2='3' transform='translate(-0.5 6.5)' fill='none' stroke='%234ca3ee' stroke-width='1'/%3E%3Cline y2='3' transform='translate(6.5 10.5)' fill='none' stroke='%234ca3ee' stroke-width='1'/%3E%3Cline x2='3' transform='translate(10.5 6.5)' fill='none' stroke='%234ca3ee' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");

}

.show-more-parent-link,.show-more-children-link{
    display:none;
}

.wyp-limit-parent-view li:nth-child(n+7){
    display:none;
}

.wyp-limit-children-view li:nth-child(n+7){
  display:none;
}

.context-menu-list.wyp-contextmenu-parent {
    max-height: 280px;
    overflow-y: auto;
}

.context-menu-list.wyp-contextmenu-children {
    max-height: 280px;
    overflow-y: auto;
}

.wyp-limit-parent-view .show-more-parent-link, .wyp-limit-children-view .show-more-children-link{
    display:block !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='4' viewBox='0 0 14 4'%3E%3Cpath d='M10,2a2,2,0,1,1,2,2A2,2,0,0,1,10,2ZM5,2A2,2,0,1,1,7,4,2,2,0,0,1,5,2ZM0,2A2,2,0,1,1,2,4,2,2,0,0,1,0,2Z' fill='%237f7f7f'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-color: #E7E7E7;
    font-size:0px;
    top:6px;
}

.wyp-limit-parent-view .show-more-parent-link:hover,.wyp-limit-children-view .show-more-children-link:hover{
    background-color:#D4E9FC;
}

body .context-menu-root:not(.dom_contextmenu):not(.wyp-crnt-el-menu) .context-menu-list{
    left:0px !important;
    margin-left:168px !important;
}

body.wyp-crnt-el-menu .context-menu-root:not(.dom_contextmenu) .context-menu-list{
    left:0px !important;
    margin-left:-168px !important;
}

body.wyp-crnt-el-menu .context-menu-root:not(.dom_contextmenu) .context-menu-item:not(.show-more-parent-link):not(.show-more-children-link){
    font-size:13px !important;
    padding:6px 8em 6px 16px;
}

body.wyp-crnt-el-menu > .context-menu-list:not(.dom_contextmenu):after, body.wyp-crnt-el-menu > .context-menu-list:not(.dom_contextmenu):before {
  bottom: 100%;
  left: 24px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

body.wyp-crnt-el-menu > .context-menu-list:not(.dom_contextmenu):after {
  border-color: transparent;
  border-bottom-color: #fff;
  border-width: 7px;
  margin-left: -7px;
}
body.wyp-crnt-el-menu > .context-menu-list:not(.dom_contextmenu):before {
  border-color: transparent;
  border-bottom-color: rgba(0,0,0,0.1);
  border-width: 8px;
  margin-left: -8px;
}

.ed-pnl span.anim-player-icon{
    position: absolute;
    margin-left: 2px;
    margin-top: -2px;
    color:#666666 !important;
    cursor:pointer !important;
}

.ed-pnl span.anim-player-icon:hover{
    color:#0080FF !important;
}

.ed-pnl span.anim-player-icon.icon-controls-pause{
    color:#da4747 !important;
}

.left-menu-sublist.interface-settings{
  bottom:0;
  top:auto;
  display:none;
  background-color:#FFF;
  padding: 8px 0px;
  width:auto;
  z-index: 9999998;
}

.wyp-fix-leftbar .left-menu-sublist.interface-settings{
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.wyp-fix-leftbar .hide-panel-hint{
  display:none;
}

.left-menu-sublist.interface-settings li{
  font-size:12px;
  line-height:18px;
  color: #474747;
  padding: 5px 100px 5px 16px;
  white-space: nowrap;
  position:relative;
  cursor:auto;
}

.left-menu-sublist.interface-settings li:hover{
  background-color:#E8E8E8;
}

.left-menu-sublist.interface-settings li.basic{
  padding-right:16px !important;
}

.left-menu-sublist.interface-settings li a{
  color: inherit;
  text-decoration: none;
  width: 100%;
  display: block;
}

.left-menu-sublist.interface-settings li a span{
  position: absolute;
  margin-top:0px;
  font-size: 16px;
  opacity: 0.85;
  margin-left:1px;
}

.interface-settings-switch {
  position: absolute;
  display: inline-block;
  width: 32px;
  height: 18px;
  right: 16px;
}

.interface-settings-switch input{
  display:none;
}

.interface-settings-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.interface-settings-slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 3px;
  top:0;
  background-color:#FFFFFF;
  transition: .1s;
  border-radius: 50%;
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}

input:checked + .interface-settings-slider {
  background-color: #82B14A;
}

input:focus + .interface-settings-slider {
  box-shadow: 0 0 1px #82B14A;
}

input:checked + .interface-settings-slider:before {
  -webkit-transform: translateX(13px) translateY(2px);
          transform: translateX(13px) translateY(2px);
}

/* Ace Auto Complete */
.ace_dark.ace_editor.ace_autocomplete{
  border: none;
  border-radius:4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23);
  line-height: 1.4;
  background: #2e2e2e;
  color: #c1c1c1;
}

.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
  background-color: rgba(255,255,255,0.1);
}

.ace_dark.ace_editor.ace_autocomplete .ace_line-hover{
  border-width:0px;
  background-color: rgba(255,255,255,0.1);
}

.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight{
  color:#9e9e9e;
}

.ace-type-here{
  position:relative;
}

.ace-type-here:before{
  position:absolute;
  content: "Type your code here.";
  padding-left:18px;
  font-style: italic;
  color: #5F5A60;
  margin-left:6px;
}

.ace-type-here.ace-type-here-in-responsive:before{
  padding-left:36px;
}

.wyp-css-editor-disable .wyp-contextmenu-type-css, .wyp-css-editor-disable .show-css-menu{
  display:none !important;
}

.wyp-css-editor-disable .source-view{
  pointer-events:none !important;
}

body .ed-pnl li.empty-property{
  display:none !important;
}

.wyp-unsplash-section{
    margin-top: 6px;
    display:none;
    width:100%;
}

.wyp-unsplash-list:empty{
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
}

.wyp-unsplash-list > span{
  margin: 0;
  padding: 0;
  width: 50%;
  height: 96px;
  background-size: cover;
  border: 1px solid #FFF;
  position:relative;
  overflow:hidden;
}

.wyp-unsplash-list > span.active{
  box-shadow: inset 0 0 0 2px #0080FF !important;
}

.wyp-unsplash-list > span:nth-child(odd) {
    border-left-width: 0px;
}

.wyp-unsplash-list > span:nth-child(even) {
    border-right-width: 0px;
}

.wyp-unsplash-list > span:nth-child(1) {
    border-top-width: 0px;
}

.wyp-unsplash-list > span:nth-child(2) {
    border-top-width: 0px;
}

.wyp-unsplash-list > span:nth-last-child(-n+2) {
    border-bottom-width:2px;
}

.wyp-unsplash-list > span.active:not(.unsplash-img-loading) i{
  width: 58px;
  padding:1px 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background-color: #0080FF;
  font-size: 11px !important;
  color: #FFFFFF;
  cursor: pointer;

  text-align: center;
  line-height: 21px;
  font-weight: 500;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  border-radius: 3px;
  box-shadow: 0 0px 50px 50px rgba(0,0,0,0.2);
  font-style:normal;
}

.wyp-unsplash-list > span.active:not(.unsplash-img-loading)[data-local] i{
  display:none !important;
}

#unsplash-search,#unsplash-search:hover,#unsplash-search:focus{
  font-size:13px;
  width: 100%;
  padding: 8px 6px;
  margin-bottom: -1px !important;
  border: 1px solid #CCC !important;
  border-radius: 3px 3px 0px 0px;
  position: relative;
  z-index: 2147483644;
  background-color: #fff;
  border-bottom-width:0px !important;
  color: #4E4E4E !important;
  box-shadow:0px 5px 3px -3px rgba(0, 0, 0, 0.14) !important;
}

.unsplash-img-loading:after{
  content: attr(data-content);
  width: 36px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background-color: #0080FF;
  font-size: 11px !important;
  color: #FFFFFF;

  padding:1px 2px;
  text-align: center;
  line-height: 21px;
  font-weight: 500;
  margin-top: -10px;
  margin-left: -16px;
  border-radius: 3px;
  box-shadow: 0 0px 50px 50px rgba(0,0,0,0.2);
}

.in-wr{
  position:relative;
}

.wyp-upload-btn{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill-rule='evenodd'%3E%3Cpath d='M15 2H7V1c0-.55-.45-1-1-1H1C.45 0 0 .45 0 1v14c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H2V2h3v1.5a.5.5 0 0 0 .5.5H14v10zM5.305 9H7v2.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V9h1.695c.297 0 .394-.265.215-.5L8.323 5.178c-.178-.235-.468-.238-.646-.004L5.1 8.5c-.18.236-.082.5.215.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    opacity: 0.6;
    background-position: center;
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: 999;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-size: 16px auto;
}

.wyp-clear-btn{
  opacity: 0;
  position: absolute;
  right: 30px;
  top: 6px;
  z-index: 999;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 16px;
  transition: opacity 100ms ease;
  color:#999;
  line-height: 20px;
  text-align: center;
  background-color:#FFF;
  pointer-events:none;
}

.in-wr:not(.empty-input) .wyp-clear-btn{
  opacity:1;
  pointer-events:auto;
}

.reset-enable .in-wr .wyp-clear-btn{
  display:none !important;
}

.ed-pnl .in-wr input{
  padding-right:31px !important;
}

.ed-pnl .in-wr:not(.empty-input) input{
  padding-right:50px !important;
}

.ed-pnl .reset-enable .in-wr input{
  padding-right:31px !important;
}

.wyp-clear-btn:hover{
  color:#D33939;
}

.wyp-upload-btn:hover,.wyp-upload-btn.active{
    opacity:#666;
}

.wyp-upload-btn.active{
    box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.1) inset;
    background-color:#D3EDFF;
}

.se-o textarea{
  display:none !important;
}

.wyp-unsplash-list.no-result{
  position:relative;
}

.wyp-unsplash-list.no-result:after{
  content:"No Result.";
  font-size:13px;
  text-align:center;
  position:absolute;
  color:#4E4E4E;
  top:0px;
  left:0px;
  width:100%;
  height: calc(50% + 11px);
  padding-top: calc(50% + 12px);
  background-color:#FFF;

}

body.yp-yellow-pencil-demo-mode .wyp-unsplash-list span > i{
  display:none !important;
}

.wyp-contextmenu-reset-single.wyp-disable-contextmenu,.wyp-contextmenu-reset-template.wyp-disable-contextmenu,.wyp-contextmenu-reset-global.wyp-disable-contextmenu{
  display:none !important;
}

.wyp-contextmenu-small{
  position: absolute;
  top: auto;
  right: 10px;
  background-color: #E8E8E8;
  padding: 0px 4px;
  font-style: normal;
  border-radius: 3px;
  color: #666;
  font-size: 11px;
}

.wyp-active-contextmenu .wyp-contextmenu-small{
  background-color:#649852 !important;
  color:#FFF !important;
}

.context-menu-item.hover .wyp-contextmenu-small{
  background-color: #DDDDDD;
}

.wyp-disable-contextmenu .wyp-contextmenu-small{
  display:none !important;
}

.wyp-contextmenu-review-styles .wyp-contextmenu-small,
.wyp-contextmenu-reset-styles .wyp-contextmenu-small{
  background-color:#4285F4 !important;
  font-weight:500 !important;
  color:#FFF !important;
}

.ace_content .ace_line_group{
  pointer-events:auto;
}

/* Grid builder disable first */
.gr-bu-ar .this-grid.last-grid .delete-grid {
    background-color: #989898;
    pointer-events:none;
}

.this-grid p, .grid-builder-add-new,.grid-format{
  font-size:12px;
}

.gr-bu-in{
  display:none;
}

.gr-bu-ar{
  background: #FFF;
  padding: 10px 0;
  border: 1px solid #BBBBBB;
  border-radius: 3px;
}

.gr-bu-ar .this-grid{
  padding-top:4px;
  padding-bottom:4px;
  padding-left:10px;
  padding-right:10px;
  position:relative;
  transition:background-color 200ms;
}

.gr-bu-ar .this-grid:hover{
  background-color:#DDEDFD;
}

.gr-bu-ar .this-grid-input{
  font-size: 12px;
  background: #FFFFFF;
  display: inline-block;
  width: 88px;
  color: #5d5d5d;
  padding:0px 6px;
  border: 1px solid #BBB;
  height: 30px;
  font-style: normal;
  border-radius: 3px 0px 0px 3px;
  position:relative;
}

/* hide placeholder if disabled */
.this-grid-input:disabled::-webkit-input-placeholder {
    color:transparent;
}

.this-grid-input:disabled:-moz-placeholder {
    color:transparent;
}

.this-grid-input:disabled::-moz-placeholder {
    color:transparent;
}

.this-grid-input:disabled:-ms-input-placeholder {
    color:transparent;
}

.gr-bu-ar .this-grid-input:hover,.gr-bu-ar .this-grid-input:focus,.gr-bu-ar .this-grid-input:active{
  z-index:5;
}

.gr-bu-ar .grid-format{
  font-size: 12px;
  background: #FFFFFF;
  display: inline-block;
  width: 100%;
  color: #5d5d5d;
  padding:0px 2px;
  border: 1px solid #BBB;
  border-right-width:0px;
  height: 30px;
  font-style: normal;
  -moz-appearance: none;
  -webkit-appearance: none;
  position:relative;
  left:-1px;
}

.gr-bu-ar .grid-format:hover{
  z-index: 5;
}

.grid-format-div{
  display: inline-block;
  height: 30px;
  position: relative;
  vertical-align: top;
  width:calc(100% - 178px);
}

.grid-format-div:hover:after{
  z-index:5;
}

.grid-format-div:after{
    border: 1px solid #00d1b2;
    border-top-color: rgb(0, 209, 178);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: rgb(0, 209, 178);
    border-right-style: solid;
    border-right-width: 1px;
    border-right: 0;
    border-top: 0;
    content: " ";
    display: block;
    height: 6px;
    pointer-events: none;
    position: absolute;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    width: 6px;
    margin-top: -5px;
    right: 8px;
    top: 50%;
    z-index: 4;
}

.grid-format-div:hover:after {
    border-color: #363636;
}

.gr-bu-ar .delete-grid{
  color: #FFF;
  border-radius: 0px 3px 3px 0px;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 4px;
  right: 10px;
  width: 25px;
  height: 30px;
  background: #808080;
  opacity:0.86;
}

.gr-bu-ar .delete-grid:hover{
  opacity:1;
}

.this-grid-input[disabled]{
  background-color:#EEE;
  pointer-events:none;
}

.this-grid p {
    display: inline-block;
    padding-right: 0px;
    font-size: 12px;
    width:66px;
}

.grid-builder-add-new{
  margin-left:10px;
  margin-top: 6px;
  color: #fff;
  cursor: pointer;
  border-radius: 3px;
  display: inline-block;
  width: 22px;
  font-size: 16px;
  height: 22px;
  line-height: 24px;
  margin-bottom: 4px;
  background-color:#7FA057;
}

.grid-builder-add-new:hover{
  opacity:1;
}

/* responsive property */
#property-responsive-menu{
  position: fixed;
  width: 144px;
  margin-left: -62px;
  padding: 6px 0;
  display: none;

  background-color: #696969;
  border-radius: 3px;

  z-index: 2147483648;
  font-size: 11px;
  color:rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), -2px 2px 10px 0 rgba(0,0,0,0.23);
}

#property-responsive-menu > b{
  display: block;
  font-weight: 500;
  color: #DFD993;
  padding-bottom: 3px;
  font-size: 12px;
  padding-left: 9px;
  padding-right: 9px;
  margin-bottom: 2px;
}

.pr-res-ite{
  padding: 5px 9px;
  cursor:pointer;
  text-transform: capitalize;
  position:relative;
}

.pr-res-ite[data-responsive-size*=","] {
    pointer-events: none !important;
}

.pr-res-ite:active{
  background-color:rgba(255,255,255,0.2) !important;
}

.pr-res-ite:hover{
  background-color:rgba(255,255,255,0.1);
}

#property-responsive-menu.responsive-menu-open{
  display:block;
}

#property-responsive-menu.top{
  margin-top:28px;
}

#property-responsive-menu.top:after, #property-responsive-menu.top:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

#property-responsive-menu.top:after {
  border-color: rgba(68, 68, 68, 0);
  border-bottom-color: #696969;
  border-width: 5px;
  margin-left: -5px;
}
#property-responsive-menu.top:before {
  border-color: rgba(68, 68, 68, 0);
  border-bottom-color: #696969;
  border-width: 6px;
  margin-left: -6px;
}


#property-responsive-menu.bottom{
  margin-top:-30px;
}

#property-responsive-menu.bottom:after, #property-responsive-menu.bottom:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

#property-responsive-menu.bottom:after {
  border-color: rgba(68, 68, 68, 0);
  border-top-color: #696969;
  border-width: 5px;
  margin-left: -5px;
}
#property-responsive-menu.bottom:before {
  border-color: rgba(68, 68, 68, 0);
  border-top-color: #696969;
  border-width: 6px;
  margin-left: -6px;
}

.pr-res-ite span:not(.icon-no-alt){
    font-size: 12px;
    width: 12px;
    height: 12px;
    position: relative;
    top: 2px;
    margin-right: 4px;
}

.pr-res-ite .icon-no-alt {
  font-size: 14px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  position: absolute;
  right: 9px;
  top: 3px;
  border-radius: 4px;
  transition: all 150ms ease;
}

.pr-res-ite .icon-no-alt:hover{
    background-color:rgba(0,0,0,0.2);
    color:rgb(255, 129, 129);
}

/* font-family --google-webfont */
#include-webfont-label{
  transition:opacity 150ms;
}

#include-webfont-label{
    display:inline-block;
    position: absolute;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 16px;
    width: 16px;
    margin-left: 4px;
    opacity:0;
}

.op-g:hover #include-webfont-label{
    opacity:1;
}

.op-g.font-family-changed #include-webfont-label{
  opacity:1;
}

#include-webfont-label input {
    position: absolute;
    opacity: 0;
    left: -9999px;
}

.include-webfont-input {
  position: absolute;
  height: 16px;
  width: 16px;
  border: 2px solid #838383;
  border-radius: 3px;
}

#include-webfont-label input:checked ~ .include-webfont-input:after {
    display: block;
}

#include-webfont-label .include-webfont-input:after {
    content: "";
    position: absolute;
    display: none;
    left: 4px;
    top: 1px;
    width: 2px;
    height: 6px;
    border: solid #618732;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

.accessibility-fail-badge, .accessibility-pass-badge, .accessibility-unknown-badge{
  text-transform: none !important;
}

.accessibility-fail-badge i, .accessibility-pass-badge i, .accessibility-unknown-badge i{
  width: auto;
  height: 10px;
  font-size: 18px;
  margin-left: 4px;
  position: relative;
  top: -1px;
}

.accessibility-fail-badge i{
  color: #C00 !important;
}

.accessibility-pass-badge i{
  color: #080 !important;
}

#wyp-customizing-type-frame{
  background-repeat:no-repeat;
  background-position:center;
  background-color: rgba(197, 185, 192, 0.6);
  background-size: 30px;
}

.option-group-class .op-g .ra{
  overflow:hidden;
}

#font-weight-group{
  width:60%;
}

#border-style-group .ra > label,#border-top-style-group .ra > label,#border-right-style-group .ra > label,#border-bottom-style-group .ra > label,#border-left-style-group .ra > label{
  position:relative;
  min-height:32px;
}

#border-style-none .yicon,#border-top-style-none .yicon,#border-right-style-none .yicon,#border-bottom-style-none .yicon,#border-left-style-none .yicon{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: -8px;
}

#border-style-solid:after,#border-top-style-solid:after,#border-right-style-solid:after,#border-bottom-style-solid:after,#border-left-style-solid:after{
  content: " ";
  width: 22px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -11px;
  border-top: 2px solid #555555;
}

#border-style-dotted:after,#border-top-style-dotted:after,#border-right-style-dotted:after,#border-bottom-style-dotted:after,#border-left-style-dotted:after{
  content: " ";
  width: 22px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -11px;
  border-top: 2px dotted #555555;
}

#border-style-dashed:after,#border-top-style-dashed:after,#border-right-style-dashed:after,#border-bottom-style-dashed:after,#border-left-style-dashed:after{
  content: " ";
  width: 22px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -11px;
  border-top: 2px dashed #555555;
}

.sl-o .op-l {
    margin-bottom: 0px !important;
    top: 4px;
    width:calc(100% - 98px);
}

.sl-o .wyp-after{
  position:relative;
  top:-3px;
}

.sl-o .sl-d {
    top:9px;
}

/* SPACING */
.option-group-class{
  display: flex;
  justify-content:space-between;
}

.ed-pnl .op-g, .option-group-class{
    padding-bottom: 14px;
    padding-top: 11px;
    padding-left: 16px;
    padding-right: 16px;
}

.option-group-less{
    padding-bottom: 13px;
    padding-top: 9px;
}

.option-group-vn-p{
  padding-top:6px;
  padding-bottom:10px;
}

.option-group-class .sl-o{
  padding-top: 0 !important;
}

.option-group-class .sl-o .op-l{
  top:0 !important;
  margin-bottom:9px !important;
}

.option-group-class .sl-o .sl-d{
  top:0px !important;
}

.cl-direction #column-count-group{
  width: 54%;
}

#wyp-column-count{
  width: calc(100% - 46px) !important;
}

#column-count-value{
  width: 26px !important;
  margin-right: 6px !important;
}

.cl-direction #direction-group{
  width: 40%;
}

.wyp-advanced-link{
  margin-top: 11px !important;
  margin-bottom: 14px !important;
}

.wyp-add-animation-link{
  margin-top:14px !important;
  border-radius:5px;
}

.sl-o {
    padding-top: 8px !important;
}

/* more padding for margin pading radius and border sliders */
.spacing-option .sl-o,.border-radius-option .sl-o, .border-option .sl-o {
    padding-top: 12px !important;
    padding-bottom: 18px !important;
}
/* SPACING END */

.option-group-class .op-g{
  border-bottom:none;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  width:47%;
}

.spacing-option .sl-o .op-l,.border-radius-option .sl-o .op-l {
    margin-bottom: 0px !important;
    top: 2px;
    width:calc(100% - 98px);
}

.spacing-option .sl-o .wyp-after,.border-radius-option .sl-o .wyp-after{
  position:relative;
  top:-3px;
}

.spacing-option .sl-o .sl-d,.border-radius-option .sl-o .sl-d {
    opacity: 1;
    top:10px;
}


.wyp-t-cont > div:not(.wyp-filter-color-adjustment-section):not(.wyp-filter-color-effects-section):not(.wyp-transform-move-section):not(.wyp-transform-rotate-section):not(.wyp-transform-skew-section):not(.wyp-transform-extra-section):not(.wyp-spacing-margin-section):not(.wyp-background-filter-section):not(.wyp-spacing-padding-section):not(.wyp-background-background-section):not(.wyp-border-all-section):not(.wyp-border-top-section):not(.wyp-border-right-section):not(.wyp-border-bottom-section):not(.wyp-border-left-section):not(.wyp-motion-animation-section):not(.wyp-motion-transition-section):hover{
  background-color:rgba(0,0,0,0.02);
}

.wyp-t-cont > .wyp-motion-animation-section > div:hover, .wyp-t-cont > .wyp-motion-transition-section > div:hover, .wyp-t-cont > .wyp-filter-color-adjustment-section > div:hover,.wyp-t-cont > .wyp-filter-color-effects-section > div:hover,.wyp-t-cont > .wyp-transform-move-section > div:hover, .wyp-t-cont > .wyp-transform-rotate-section > div:hover, .wyp-t-cont > .wyp-transform-skew-section > div:hover, .wyp-t-cont > .wyp-transform-extra-section > div:hover,.wyp-t-cont > .wyp-spacing-margin-section > div:hover, .wyp-t-cont > .wyp-background-filter-section > div:hover, .wyp-t-cont > .wyp-background-background-section > div:hover, .wyp-t-cont > .wyp-spacing-padding-section > div:hover, .wyp-t-cont > .wyp-border-all-section > div:hover,.wyp-t-cont > .wyp-border-top-section > div:hover,.wyp-t-cont > .wyp-border-right-section > div:hover,.wyp-t-cont > .wyp-border-bottom-section > div:hover,.wyp-t-cont > .wyp-border-left-section > div:hover{
  background-color:rgba(0,0,0,0.02);
}

.wyp-t-cont > .wyp-advanced-option > div:hover{
  background-color:rgba(0,0,0,0.02);
}

.op-g.reset-enable:not(#animation-play-group) .op-l > span.di-btn {
    background: rgba(104, 104, 104, 0.13);
    padding: 2px 4px;
    border-radius: 3px;
    cursor:default;
    color: rgb(17, 115, 181) !important;
}

.op-g.reset-enable:not(#animation-play-group) .op-l > span.di-btn:hover {
    background: rgba(104, 104, 104, 0.10);
    color: rgb(11, 133, 215) !important;
}

.op-g.reset-enable:not(#animation-play-group) .op-l > span.di-btn:after {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-family: "wyp-ed" !important;
    text-decoration: inherit !important;
    font-weight: 400 !important;
    font-style: normal !important;
    vertical-align: top !important;
    text-align: center !important;
    content: "\e80e";
    margin-top: 2px;
    margin-left: 2px;
}

#border-style-group,
#border-top-style-group,
#border-right-style-group,
#border-bottom-style-group,
#border-left-style-group{
  width:57%;
}

#border-color-group,
#border-top-color-group,
#border-right-color-group,
#border-bottom-color-group,
#border-left-color-group{
  width:37%;
}


/* small options */
#align-self-group .op-c,

#box-shadow-inset-group .op-c,
#visibility-group .op-c,
#display-group .op-c,
#background-repeat-group .op-c,
#background-clip-group .op-c,
#background-size-group > .op-c,
#transition-timing-function-group .op-c,
#animation-timing-function-group .op-c,
#background-color-group .op-c,
#box-shadow-color-group .op-c
{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#align-self-group .op-c .op-l,

#box-shadow-inset-group .op-c .op-l,
#visibility-group .op-c .op-l,
#display-group .op-c .op-l,
#background-repeat-group .op-c .op-l,
#background-clip-group .op-c .op-l,
#background-size-group > .op-c .op-l,
#transition-timing-function-group .op-c .op-l,
#animation-timing-function-group .op-c .op-l,
#background-color-group .op-c .op-l,
#box-shadow-color-group .op-c .op-l
{
  margin-bottom: 0px !important;
  width: 50%;
}


#align-self-group .op-c > div,

#box-shadow-inset-group .op-c > div,
#visibility-group .op-c > div,
#display-group .op-c > div,
#background-repeat-group .op-c > div,
#background-clip-group .op-c > div,
#background-size-group > .op-c > div,
#transition-timing-function-group .op-c > div,
#animation-timing-function-group .op-c > div,
#background-color-group .op-c > div,
#box-shadow-color-group .op-c > div
{
  width: 70%;
}

.background-size-custom-group {
    display: none;
    justify-content: flex-end;
    padding-top:6px;
    margin-bottom: -6px;
}

.background-size-x-group {
    margin-right: 6px;
}

.property-title {
    display: block;
    text-align: center;
    padding-top: 2px;
    font-size: 11px;
    color: #777;
}


/* ---------------------------------------------------- */
/* PERFECT SCROLLBAR                                    */
/* ---------------------------------------------------- */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

.ps__rail-x{
  display:none !important;
}

.ps__rail-y{
  position: absolute;
    width:4px;
    z-index:2147483647;
    right: 0px !important;
    left: unset !important;
}

.ps__thumb-y{
  position: absolute;
    width: 4px;
    right: 0px !important;
    left:auto !important;
}

.ed-pnl .ps__thumb-y{
  display:none !important;
  right: 2px !important;
  border-radius:6px !important;
  background-color:#929292;
}

.ed-pnl .ps--active-y .ps__thumb-y{
  display:block !important;
}

.ed-pnl .ps__rail-y.ps--clicking > .ps__thumb-y{
  background-color:#787878;
}

#vsl-css-vi .ps__thumb-y {
  background-color:#636363;
}

#vsl-css-vi .ps__rail-y.ps--clicking > .ps__thumb-y{
  background-color:#7d7d7d;
}

#layer-tree .ps__thumb-y{
  right: 2px !important;
  border-radius:6px !important;
    background-color:#a4a4a4;
}

#layer-tree .ps__rail-y.ps--clicking > .ps__thumb-y{
  background-color:#8a8a8a;
}


@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}


/* default. not about reset or responsive icon */
#pointer-events-group{
  width:54%;
}

#cursor-group{
  width: 40%;
}


/* based on reset and responsive icon and wtfv */
#align-self-group.reset-enable.property-responsive .op-c .op-l{
  width:70%;
}

body.wtfv #background-color-group.reset-enable.property-responsive .op-c .op-l{
  width:70%;
}

body.wtfv #color-group.reset-enable.property-responsive{
  width:60%;
}

.grid-section #align-items-group{
  width:45%;
}

#list-style-type-group .ui-autocomplete{
  max-height: 158px;
}


/* ---------------------------------------------------- */
/* Layer Tree                                           */
/* ---------------------------------------------------- */
#layer-tree {
	position: absolute;
  top: 49px;
  left: 44px;
	width: 200px;
	font-size: 13px;
	color: #595959;
	line-height: 16px;
  text-transform: lowercase;
  background-color: #FFFFFF;
  display:none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 2px 2px 10px 0 rgba(0,0,0,0.23);
  border-radius: 6px;
  z-index: 9999;
}

body.wyp-nvgtn-act #layer-tree{
  display:block;
}

#layer-tree-title {
  text-transform: capitalize;
  text-align: center;
  height: 32px;
  line-height: 31px;
  color: #474747;
  font-size: 13px;
  font-weight: 500;
  background-color: #f0f0f0;
  border-radius: 6px 6px 0 0;
}

#layer-tree ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: none;
}

#layer-tree ul#layer-tree-ul > li{
  padding-bottom:6px;
}

#layer-tree ul#layer-tree-ul {
	display: block;
	position: relative;
	border-left-width: 0;
	margin-left: 0;
	padding: 0 6px;

  min-height: 200px;
  max-height: 62vh;

  overflow-y:auto;
  overflow-x:hidden;
}

#layer-tree .layer-tree-wrap {
	display: flex;
	position: relative;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 14px;
	flex: 1;
}

#layer-tree li.active>ul {
	display: block;
}

#layer-tree li.has-children>.layer-tree-wrap .icon-arrow-down {
	display: block;
}

#layer-tree li.selected>.layer-tree-wrap:after {
  content: " ";
	display: block;
	position: absolute;
	top: 0;
  left: -500px;
  width: 1000px;
	background: #4285f4;
	height: 100%;
}

#layer-tree li:not(.selected)>.layer-tree-wrap:hover:after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: -500px;
  width: 1000px;
  background: #f1f1f1;
  height: 100%;
}

#layer-tree li:not(.has-children)>.icon-arrow-down {
	display: none;
}

#layer-tree li.is-hidden .layer-tree-title {
	opacity: 0.6;
}

#layer-tree .layer-tree-title {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	z-index: 1;
  flex-grow: 1;
}

#layer-tree .layer-tree-title svg{
	margin-right:4px;
  max-width:10px;
  max-height:10px;
	height:auto;
  pointer-events:none;
}

#layer-tree .icon-arrow-down {
	position: absolute;
	top: 0;
	left: -8px;
	width: 24px;
	height: 26px;
	line-height: 26px;
	-webkit-transform: rotate(-90deg);
	        transform: rotate(-90deg);
	color: #aaaaaa;
	font-size: 18px;
	display: none;
	margin-top: 1px;
	z-index: 1;
}

#layer-tree li.active>.layer-tree-wrap>.icon-arrow-down {
	-webkit-transform: rotate(0);
	        transform: rotate(0);
	transition: none;
	margin-top: 0;
}

#layer-tree ul {
	padding-left: 5px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
	margin-left: 4px;
}

#layer-tree ul ul ul{
  padding-left: 4px;
}

#layer-tree ul ul ul ul ul ul{
  padding-left: 3px;

}

#layer-tree ul ul ul ul ul ul ul ul ul{
  padding-left: 2px;

}

#layer-tree ul ul ul ul ul ul ul ul ul ul ul ul{
  padding-left: 2px;
}


#layer-tree .icon-arrow-down:hover{
  color: rgba(0, 0, 0, 0.6);
}

#layer-tree li.active > .layer-tree-wrap > .icon-arrow-down {
  color: rgba(0, 0, 0, 0.56);
}

#layer-tree li.selected>.layer-tree-wrap,
#layer-tree li.selected>.layer-tree-wrap>.icon-arrow-down {
	color: rgba(255, 255, 255, 0.9);
}

#search-css-selector{
  position: absolute;
  right: 6px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIGlkPSJHbHlwaCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNy40MTQsMjQuNTg2bC01LjA3Ny01LjA3N0MyMy4zODYsMTcuOTI4LDI0LDE2LjAzNSwyNCwxNGMwLTUuNTE0LTQuNDg2LTEwLTEwLTEwUzQsOC40ODYsNCwxNCAgczQuNDg2LDEwLDEwLDEwYzIuMDM1LDAsMy45MjgtMC42MTQsNS41MDktMS42NjNsNS4wNzcsNS4wNzdjMC43OCwwLjc4MSwyLjA0OCwwLjc4MSwyLjgyOCwwICBDMjguMTk1LDI2LjYzMywyOC4xOTUsMjUuMzY3LDI3LjQxNCwyNC41ODZ6IE03LDE0YzAtMy44NiwzLjE0LTcsNy03czcsMy4xNCw3LDdzLTMuMTQsNy03LDdTNywxNy44Niw3LDE0eiIgaWQ9IlhNTElEXzIyM18iLz48L3N2Zz4=);
  background-size: 16px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  top: 6px;
  opacity: 0.5;
  background-position: center;
  border-radius: 10px;
  cursor:pointer;
}

#search-css-selector:hover{
  background-color: rgba(0,0,0,0.20);
}

.type-has-change{
  position:relative;
}

#border-type-group .type-has-change:after {
  margin-left: 12px;
}

.type-has-change:after{
  opacity: 1;
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: 4px;
  background-color: rgba(21, 146, 230, 0.7);
  border-radius: 30px;
  content: " ";
}

body.wyp-res-resizing #vsl-css-vi, body.wyp-res-resizing #leftAreaEditor {
    display: none !important;
}




/* Light Default Usage */
::-webkit-scrollbar{
 width: 5px;
 height:5px;
}
::-webkit-scrollbar-thumb{
  background: rgba(150,150,150,1);
  background:linear-gradient(90deg, rgba(150,150,150,1) 0%, rgba(160,160,160,1) 100%);
  border-radius:2px;
}
::-webkit-scrollbar-track{
 background: rgba(230,230,230,1);
  background:linear-gradient(90deg, rgba(230,230,230,1) 0%, rgba(240,240,240,1) 100%);
}

div, ul{
  scrollbar-color: rgba(160,160,160) rgb(240,240,240) !important;
  scrollbar-width: thin !important;
}



/* Dark */
.ace_scrollbar::-webkit-scrollbar-track,
.wyp-animate-manager-inner::-webkit-scrollbar-track,
#vsl-css-co::-webkit-scrollbar-track,
.wyp-anim-list-menu > ul::-webkit-scrollbar-track{
    background: transparent;
}
.ace_scrollbar::-webkit-scrollbar-thumb,
.wyp-animate-manager-inner::-webkit-scrollbar-thumb,
#vsl-css-co::-webkit-scrollbar-thumb{
    background: #828282;
    background:linear-gradient(90deg, rgba(130,130,130,1) 0%, rgba(140,140,140,1) 100%);
}
.ace_scrollbar::-webkit-scrollbar-corner,
.wyp-animate-manager-inner::-webkit-scrollbar-corner,
#vsl-css-co::-webkit-scrollbar-corner,
.wyp-anim-list-menu > ul::-webkit-scrollbar-corner{
	visibility:hidden;
  background-color:transparent;
}

.ace_scrollbar,.wyp-animate-manager-inner,#vsl-css-co,.wyp-anim-list-menu > ul{
  scrollbar-color: auto !important;
}


@media (max-height:740px){

.advanced-info-box-inner {
    min-height:200px;
}

}


@media (max-height:740px){

  #layer-tree ul#layer-tree-ul {
    max-height: 70vh;
  }

}


/* left bar small screen */
@media (max-height:600px){

  .leftbar-button > span {
      -webkit-transform: scale(0.9);
              transform: scale(0.9);
  }

  .leftbar-button:not(.left-menu-btn){
    padding:10px 0;
  }

  .leftbar-button.active:not(.wyp-responsive-btn):after, .wyp-responsive-btn:not(.active):after {
      width: 30px;
      height: 30px;
      top: 6px;
      left: 6px;
  }

  .left-menu-sublist{
    top:8px;
  }

  #layer-tree{
    top:44px;
  }

  .advanced-info-box{
    top:266px;
  }

}


/* browser mode */
.wyp-b-mode .wyp-button-live,
.wyp-b-mode .wyp-bg-img-btn,
.wyp-b-mode .wyp-background-asts,
.wyp-b-mode .manage-customizations-link,
.wyp-b-mode .manage-customizations-border,
.wyp-b-mode .wyp-contextmenu-conditions,
.wyp-b-mode .ed-pnl .wyp-csng-sec #customizing-mode .icon-arrow-down,
.wyp-b-mode .selector-group .source-view,
.wyp-b-mode .wyp-unsplash-list > span.active:not(.unsplash-img-loading) i,
.wyp-b-mode #include-webfont-label,
.wyp-b-mode .wyp-upload-btn.wyp-gallery-btn,
.wyp-b-mode .wyp-clear-btn.yicon.icon-no-alt,
.wyp-b-mode .css-editor-btn,
.wyp-b-mode .wyp-contextmenu-type-css,
.wyp-b-mode .wyp-contextmenu-type-css,
.wyp-b-mode li.show-css-menu,
.wyp-b-mode .animation-manager-btn,
.wyp-b-mode .ed-pnl .animation-option{
  display:none !important;
}

.wyp-b-mode .ed-pnl .in-wr input,
.wyp-b-mode .ed-pnl .reset-enable .in-wr input,
.wyp-b-mode .ed-pnl .in-wr:not(.empty-input) input{
  padding-right:4px !important;
}

.wyp-b-mode .ed-pnl .wyp-csng-sec #customizing-mode{
  pointer-events: none !important;
}

.wyp-b-mode .ed-pnl .wyp-csng-sec #customizing-mode[data-this-type="global"]{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23646464'%3E%3Cpath d='M15.34 26.542h32.407M15.34 36.25h32.407m-32.407 9.7h32.407' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='3'/%3E%3Cg stroke-miterlimit='10' stroke-width='3'%3E%3Cpath d='M43.437 1.5H7.218v61H56.78V15.083L43.676 1.5z'/%3E%3Cpath d='M56.78 15.083H43.437V1.5'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.wyp-b-mode .wyp-gradient-btn{
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}


.yellow-overlay.yellow-alert-bmode{
  background-color:rgba(100, 100, 100, 0.6);
      -webkit-backdrop-filter: blur(1px);
              backdrop-filter: blur(1px);
}

.yellow-alert-bmode .yellow-alert{
  background-color: #333;
  color: #eaeaea;
  border-radius: 6px;
  padding: 0;
  text-align: left;
  max-width: 650px;
  box-shadow:0 0 20px 0 rgb(0, 0, 0, 0.30);
  overflow: hidden;
  top:34%;
}

.yellow-alert-bmode .yellow-alert > .button-container{
  display:none;
}

.yellow-alert-bmode .yellow-alert .export-title {
  padding: 12px 16px;
  background-color: #585858;
  border-radius: 6px 6px 0 0;
  position:relative;
}

.yellow-alert-bmode .yellow-alert #b-mode-css{
    border:none;
    border-radius:0;
    margin: 0px;
    overflow: auto;
    font-family: monospace,monospace;
    color: #e1e1e1;
    resize: none;
    height: 300px;
    width: 600px;
}

.yellow-alert-bmode .yellow-alert .ace_gutter{
  display:none !important;
}

.yellow-alert-bmode .yellow-alert .ace_scroller{
  left:0 !important;
}

.yellow-alert-bmode .yellow-alert .cly{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M67.351,75.212,44.841,52.7,22.332,75.212a5.56,5.56,0,0,1-7.862-7.862L36.979,44.84,14.469,22.331a5.56,5.56,0,0,1,7.862-7.862L44.841,36.978,67.351,14.469a5.56,5.56,0,1,1,7.862,7.862L52.7,44.84,75.213,67.35a5.56,5.56,0,0,1-7.862,7.862Z' transform='translate(-12.841 -12.84)' fill='%23fff'/%3E%3C/svg%3E");
  width: 14px;
    height: 14px;
    position: absolute;
    opacity: 0.8;
    top: 14px;
    right: 16px;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor:pointer;
}

.yellow-alert p:empty {
  display: none;
}