File: /home/thwoodlg/public_html/wp-content/plugins/waspthemes-yellow-pencil/css/yellow-pencil.css
body *{
outline:none;
}
/* ---------------------------------------------------- */
/* JQUERY CONTEXTMENU */
/* ---------------------------------------------------- */
.context-menu-list {
margin: 0;
padding: 0;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
transition: opacity 0.218s ease 0s;
background: #FFF;
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: default;
font-size: 12px;
outline: none;
padding: 6px 0px;
position: absolute;
line-height: 17px;
font-family: Arial, Helvetica, sans-serif;
}
.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: #EEEEEE;
}
.context-menu-item.yp-disable-contextmenu {
color: #6c6c6c !important;
pointer-events: none;
background: #FFF !important;
cursor: default !important;
}
.context-menu-item.yp-disable-contextmenu,
.context-menu-item.yp-disable-contextmenu span {
cursor: default !important;
}
.context-menu-list {
z-index: 2147483646 !important;
max-width: 170px !important;
width: 170px !important;
}
.context-menu-item.yp-active-contextmenu {
background: rgba(21, 146, 230, 0.15) !important;
}
/* ---------------------------------------------------- */
/* UISLIDER */
/* ---------------------------------------------------- */
.yp-slider-div{
height:15px;
position:relative;
}
.yp-slider-div:after{
width:100%;
display:block;
background: #E4E4E4;
height: 2px;
content: "";
position:relative;
top:-10px;
border-radius: 10px;
}
.yp-slider-current{
background-color: #828282;
position: absolute;
top: 4px;
height: 2px;
width: 20px;
z-index: 10;
left: 0;
border-radius: 10px;
transition:background-color 200ms ease;
}
.yp-slider-div .ui-slider-handle{
width: 14px;
height: 14px;
margin-left: -6px;
top: -2px;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
border-radius: 9999px;
-webkit-border-radius: 9999px;
-moz-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 #f4f4f4;
}
.yp-slider-option:hover .ui-slider-handle{
box-shadow: 0 0 0 3px #F0F0F0;
}
.yp-slider-option .ui-slider-handle.ui-state-active{
border-width: 7px;
background-color:#666666;
}
.yp-slider-div:hover .yp-slider-current{
background-color:#666666;
}
.yp-slider-div:hover .ui-slider-handle{
border-color:#666666;
}
.yp-slider-div{
width: ms-calc(100% - 98px);
width: calc(100% - 98px);
float:left;
margin-top: 4px !important;
margin-left: 2px !important;
}
.yp-slider-option .yp-after{
display:inline-block !important;
float:right;
}
.yp-slider-option .yp-after input{
margin-top: 0px !important;
margin-bottom: 0px !important;
}
/* ---------------------------------------------------- */
/* IRIS COLORPICKER */
/* ---------------------------------------------------- */
.iris-picker{
width: 224px;
z-index: 1000;
display: inline-block;
border: 1px solid rgba(0,0,0,.2);
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 10px 2px rgba(0,0,0,.12);
}
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;
}
.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: 600;
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;
}
/* ---------------------------------------------------- */
/* 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-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 */
.yp-animate-manager .tooltip.in {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.yp-animate-manager .tooltip,
.anim-bar .tooltip {
font-size: 12px !important;
}
.yp-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:46px;
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;
}
/* visual manager tooltip */
#visual-css-view .tooltip {
font-size: 11px !important;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#visual-css-view .tooltip-inner {
padding: 4px 6px !important;
}
#visual-css-view .tooltip.in {
opacity: 1 !important;
}
#visual-css-view .tooltip-inner {
background-color: #595959 !important;
}
#visual-css-view .tooltip.bottom .tooltip-arrow {
border-bottom-color: #595959 !important;
}
/* Select box tooltip */
.editor-panel .tooltip-inner {
font-size: 12px !important;
}
/* Customizing type tooltip */
#customizing-type-list .tooltip {
font-size: 12px !important;
}
#customizing-type-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;
}
.editor-panel span.yp-option-label span{
transition-property: color;
transition-duration: 0ms;
transition-timing-function: linear;
transition-delay: 50ms;
}
.editor-panel .yp-option-group:not(.reset-enable) span.yp-option-label span:hover{
color:rgb(11, 133, 215) !important;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 2147483648;
display: none;
max-width: 250px;
padding: 1px;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
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;
box-shadow: 0px 1px 7px 3px rgba(0, 0, 0, 0.1);
}
.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: #666;
color: rgba(255, 255, 255, 0.85);
font-weight: 600 !important;
border-radius: 2px 2px 0px 0px;
}
.popover-content {
border: 1px solid #b1b1b1;
border-top-width: 0px;
padding: 8px 10px !important;
color: #555;
font-size: 12px;
line-height: 1.5 !important;
border-radius: 0px 0px 2px 2px !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: 11px;
}
.popover>.arrow:after {
border-width: 10px;
content: "";
}
.popover.top>.arrow {
left: 50%;
margin-left: -11px;
border-bottom-width: 0;
border-top-color: #AAA;
bottom: -11px;
}
.popover.top>.arrow:after {
content: " ";
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #FAFAFA;
}
.popover.right>.arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
border-right-color: #AAA;
}
.popover.right>.arrow:after {
content: " ";
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: #FAFAFA;
}
.popover.bottom>.arrow {
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #AAA;
top: -11px;
}
.popover.bottom>.arrow:after {
content: " ";
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #FAFAFA;
}
.popover.left>.arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #AAA;
}
.popover.left>.arrow:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: #FAFAFA;
bottom: -10px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.hidden {
display: none !important;
}
.affix {
position: fixed;
}
.anim-bar .popover.top>.arrow {
left: 50%;
margin-left: -11px;
border-bottom-width: 0;
border-top-color: #a6bee6;
bottom: -10px;
}
.anim-bar .popover.top>.arrow:after {
content: " ";
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #FFF;
}
/* ---------------------------------------------------- */
/* SWEETALERT */
/* ---------------------------------------------------- */
body.stop-scrolling {
height: 100%;
overflow: hidden;
}
.sweet-overlay {
background-color: black;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
z-index: 2147483646;
}
.sweet-alert {
background-color: white;
width: 478px;
padding: 30px 20px;
border-radius: 5px;
text-align: center;
position: fixed;
left: 50%;
top: 50%;
margin-left: -256px;
margin-top: -200px;
overflow: hidden;
display: none;
z-index: 2147483647;
}
@media all and (max-width: 540px) {
.sweet-alert {
width: auto;
margin-left: 0;
margin-right: 0;
left: 15px;
right: 15px;
}
}
.sweet-alert h2 {
color: #575757;
font-size: 30px;
text-align: center;
font-weight: 600;
text-transform: none;
position: relative;
margin: 25px 0;
padding: 0;
line-height: 40px;
display: block;
}
.sweet-alert p {
color: #797979;
font-size: 16px;
text-align: center;
font-weight: 300;
position: relative;
text-align: inherit;
float: none;
margin: 0;
padding: 0;
line-height: normal;
}
.sweet-alert fieldset {
border: none;
position: relative;
}
.sweet-alert .sa-error-container {
background-color: #f1f1f1;
margin-left: -17px;
margin-right: -17px;
overflow: hidden;
padding: 0 10px;
max-height: 0;
webkit-transition: padding 0.15s, max-height 0.15s;
transition: padding 0.15s, max-height 0.15s;
}
.sweet-alert .sa-error-container.show {
padding: 10px 0;
max-height: 100px;
webkit-transition: padding 0.2s, max-height 0.2s;
transition: padding 0.25s, max-height 0.25s;
}
.sweet-alert .sa-error-container .icon {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #ea7d7d;
color: white;
line-height: 24px;
text-align: center;
margin-right: 3px;
}
.sweet-alert .sa-error-container p {
display: inline-block;
}
.sweet-alert .sa-input-error {
position: absolute;
top: 29px;
right: 26px;
width: 20px;
height: 20px;
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: all 0.1s;
}
.sweet-alert .sa-input-error::before,
.sweet-alert .sa-input-error::after {
content: "";
width: 20px;
height: 6px;
background-color: #f06e57;
border-radius: 3px;
position: absolute;
top: 50%;
margin-top: -4px;
left: 50%;
margin-left: -9px;
}
.sweet-alert .sa-input-error::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sweet-alert .sa-input-error::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sweet-alert .sa-input-error.show {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.sweet-alert input {
display: none;
}
.sweet-alert .sa-confirm-button-container {
display: inline-block;
position: relative;
}
.sweet-alert .la-ball-fall {
position: absolute;
left: 50%;
top: 50%;
margin-left: -27px;
margin-top: 4px;
opacity: 0;
visibility: hidden;
}
.sweet-alert button {
background-color: #8CD4F5;
color: white;
border: none;
box-shadow: none;
font-size: 17px;
font-weight: 500;
border-radius: 5px;
padding: 10px 32px;
margin: 26px 5px 0 5px;
cursor: pointer;
}
.sweet-alert button:focus {
outline: none;
box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.sweet-alert button:hover {
background-color: #7ecff4;
}
.sweet-alert button:active {
background-color: #5dc2f1;
}
.sweet-alert button.cancel {
background-color: #C1C1C1;
}
.sweet-alert button.cancel:hover {
background-color: #b9b9b9;
}
.sweet-alert button.cancel:active {
background-color: #a8a8a8;
}
.sweet-alert button.cancel:focus {
box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important;
}
.sweet-alert button[disabled] {
opacity: .6;
cursor: default;
}
.sweet-alert button.confirm[disabled] {
color: transparent;
}
.sweet-alert button.confirm[disabled]~.la-ball-fall {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.sweet-alert button::-moz-focus-inner {
border: 0;
}
.sweet-alert[data-has-cancel-button=false] button {
box-shadow: none !important;
}
.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
padding-bottom: 40px;
}
.sweet-alert .sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
border-radius: 40px;
border-radius: 50%;
margin: 0px auto;
padding: 0;
position: relative;
box-sizing: content-box;
}
.sweet-alert .sa-icon.sa-error {
border-color: #F27474;
}
.sweet-alert .sa-icon.sa-error .sa-x-mark {
position: relative;
display: block;
}
.sweet-alert .sa-icon.sa-error .sa-line {
position: absolute;
height: 5px;
width: 47px;
background-color: #F27474;
display: block;
top: 37px;
border-radius: 2px;
}
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: 17px;
}
.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 16px;
}
.sweet-alert .sa-icon.sa-warning {
border-color: #F8BB86;
}
.sweet-alert .sa-icon.sa-warning .sa-body {
position: absolute;
width: 5px;
height: 47px;
left: 50%;
top: 10px;
border-radius: 2px;
margin-left: -2px;
background-color: #F8BB86;
}
.sweet-alert .sa-icon.sa-warning .sa-dot {
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
left: 50%;
bottom: 10px;
background-color: #F8BB86;
}
.sweet-alert .sa-icon.sa-info {
border-color: #C9DAE1;
}
.sweet-alert .sa-icon.sa-info::before {
content: "";
position: absolute;
width: 5px;
height: 29px;
left: 50%;
bottom: 17px;
border-radius: 2px;
margin-left: -2px;
background-color: #C9DAE1;
}
.sweet-alert .sa-icon.sa-info::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
top: 19px;
background-color: #C9DAE1;
}
.sweet-alert .sa-icon.sa-success {
border-color: #A5DC86;
}
.sweet-alert .sa-icon.sa-success::before,
.sweet-alert .sa-icon.sa-success::after {
content: '';
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sweet-alert .sa-icon.sa-success::before {
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px;
}
.sweet-alert .sa-icon.sa-success::after {
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0px 60px;
transform-origin: 0px 60px;
}
.sweet-alert .sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(165, 220, 134, 0.2);
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.sweet-alert .sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sweet-alert .sa-icon.sa-success .sa-line {
height: 5px;
background-color: #A5DC86;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sweet-alert .sa-icon.sa-custom {
background-size: contain;
border-radius: 0;
border: none;
background-position: center center;
background-repeat: no-repeat;
}
/* * Animations */
@-webkit-keyframes showSweetAlert {
0% {
transform: scale(0.7);
-webkit-transform: scale(0.7);
}
45% {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}
80% {
transform: scale(0.95);
-webkit-transform: scale(0.95);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@keyframes showSweetAlert {
0% {
transform: scale(0.7);
-webkit-transform: scale(0.7);
}
45% {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}
80% {
transform: scale(0.95);
-webkit-transform: scale(0.95);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@-webkit-keyframes hideSweetAlert {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@keyframes hideSweetAlert {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes slideFromTop {
0% {
top: 0%;
}
100% {
top: 50%;
}
}
@keyframes slideFromTop {
0% {
top: 0%;
}
100% {
top: 50%;
}
}
@-webkit-keyframes slideToTop {
0% {
top: 50%;
}
100% {
top: 0%;
}
}
@keyframes slideToTop {
0% {
top: 50%;
}
100% {
top: 0%;
}
}
@-webkit-keyframes slideFromBottom {
0% {
top: 70%;
}
100% {
top: 50%;
}
}
@keyframes slideFromBottom {
0% {
top: 70%;
}
100% {
top: 50%;
}
}
@-webkit-keyframes slideToBottom {
0% {
top: 50%;
}
100% {
top: 70%;
}
}
@keyframes slideToBottom {
0% {
top: 50%;
}
100% {
top: 70%;
}
}
.showSweetAlert[data-animation=pop] {
-webkit-animation: showSweetAlert 0.3s;
animation: showSweetAlert 0.3s;
}
.showSweetAlert[data-animation=none] {
-webkit-animation: none;
animation: none;
}
.showSweetAlert[data-animation=slide-from-top] {
-webkit-animation: slideFromTop 0.3s;
animation: slideFromTop 0.3s;
}
.showSweetAlert[data-animation=slide-from-bottom] {
-webkit-animation: slideFromBottom 0.3s;
animation: slideFromBottom 0.3s;
}
.hideSweetAlert[data-animation=pop] {
-webkit-animation: hideSweetAlert 0.2s;
animation: hideSweetAlert 0.2s;
}
.hideSweetAlert[data-animation=none] {
-webkit-animation: none;
animation: none;
}
.hideSweetAlert[data-animation=slide-from-top] {
-webkit-animation: slideToTop 0.4s;
animation: slideToTop 0.4s;
}
.hideSweetAlert[data-animation=slide-from-bottom] {
-webkit-animation: slideToBottom 0.3s;
animation: slideToBottom 0.3s;
}
@-webkit-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
@keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
@-webkit-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
@keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
@-webkit-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
@keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
.animateSuccessTip {
-webkit-animation: animateSuccessTip 0.75s;
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
-webkit-animation: animateSuccessLong 0.75s;
animation: animateSuccessLong 0.75s;
}
.sa-icon.sa-success.animate::after {
-webkit-animation: rotatePlaceholder 4.25s ease-in;
animation: rotatePlaceholder 4.25s ease-in;
}
@-webkit-keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0;
}
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1;
}
}
@keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0;
}
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1;
}
}
.animateErrorIcon {
-webkit-animation: animateErrorIcon 0.5s;
animation: animateErrorIcon 0.5s;
}
@-webkit-keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0;
}
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0;
}
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px;
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1;
}
}
@keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0;
}
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0;
}
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px;
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1;
}
}
.animateXMark {
-webkit-animation: animateXMark 0.5s;
animation: animateXMark 0.5s;
}
@-webkit-keyframes pulseWarning {
0% {
border-color: #F8D486;
}
100% {
border-color: #F8BB86;
}
}
@keyframes pulseWarning {
0% {
border-color: #F8D486;
}
100% {
border-color: #F8BB86;
}
}
.pulseWarning {
-webkit-animation: pulseWarning 0.75s infinite alternate;
animation: pulseWarning 0.75s infinite alternate;
}
@-webkit-keyframes pulseWarningIns {
0% {
background-color: #F8D486;
}
100% {
background-color: #F8BB86;
}
}
@keyframes pulseWarningIns {
0% {
background-color: #F8D486;
}
100% {
background-color: #F8BB86;
}
}
.pulseWarningIns {
-webkit-animation: pulseWarningIns 0.75s infinite alternate;
animation: pulseWarningIns 0.75s infinite alternate;
}
@-webkit-keyframes rotate-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* Error icon */
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
-ms-transform: rotate(45deg) \9;
}
.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
-ms-transform: rotate(-45deg) \9;
}
/* Success icon */
.sweet-alert .sa-icon.sa-success {
border-color: transparent\9;
}
.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
-ms-transform: rotate(45deg) \9;
}
.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
-ms-transform: rotate(-45deg) \9;
}
.la-ball-fall,
.la-ball-fall>div {
position: relative;
box-sizing: border-box;
}
.la-ball-fall {
display: block;
font-size: 0;
color: #fff;
}
.la-ball-fall.la-dark {
color: #333;
}
.la-ball-fall>div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.la-ball-fall {
width: 54px;
height: 18px;
}
.la-ball-fall>div {
width: 10px;
height: 10px;
margin: 4px;
border-radius: 100%;
opacity: 0;
-webkit-animation: ball-fall 1s ease-in-out infinite;
animation: ball-fall 1s ease-in-out infinite;
}
.la-ball-fall>div:nth-child(1) {
-webkit-animation-delay: -200ms;
animation-delay: -200ms;
}
.la-ball-fall>div:nth-child(2) {
-webkit-animation-delay: -100ms;
animation-delay: -100ms;
}
.la-ball-fall>div:nth-child(3) {
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
}
.la-ball-fall.la-sm {
width: 26px;
height: 8px;
}
.la-ball-fall.la-sm>div {
width: 4px;
height: 4px;
margin: 2px;
}
.la-ball-fall.la-2x {
width: 108px;
height: 36px;
}
.la-ball-fall.la-2x>div {
width: 20px;
height: 20px;
margin: 8px;
}
.la-ball-fall.la-3x {
width: 162px;
height: 54px;
}
.la-ball-fall.la-3x>div {
width: 30px;
height: 30px;
margin: 12px;
}
/* * Animation */
@-webkit-keyframes ball-fall {
0% {
opacity: 0;
-webkit-transform: translateY(-145%);
transform: translateY(-145%);
}
10% {
opacity: .5;
}
20% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
80% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
90% {
opacity: .5;
}
100% {
opacity: 0;
-webkit-transform: translateY(145%);
transform: translateY(145%);
}
}
@keyframes ball-fall {
0% {
opacity: 0;
-webkit-transform: translateY(-145%);
transform: translateY(-145%);
}
10% {
opacity: .5;
}
20% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
80% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
90% {
opacity: .5;
}
100% {
opacity: 0;
-webkit-transform: translateY(145%);
transform: translateY(145%);
}
}
/* ---------------------------------------------------- */
/* YELLOW PENCIL CSS */
/* ---------------------------------------------------- */
body,html {
overflow: hidden;
background: #999999;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
input,select,textarea,button{
font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.ace_scrollbar::-webkit-scrollbar {
width: 6px;
}
.ace_scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.ace_scrollbar::-webkit-scrollbar-thumb {
background: #666666;
}
.ace_scrollbar::-webkit-scrollbar-thumb:hover {
background: #666666;
}
/* 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;
}
.hidden-x {
visibility: hidden !important;
}
.ace_editor.ace_autocomplete {
z-index: 999999999 !important;
}
.yellow_pencil_iframe { /* for left bar */
width: -ms-calc(100% - 46px);
width: -o-calc(100% - 46px);
width: calc(100% - 46px);
height: 100%;
position: fixed;
top: 0;
left: 0;
border-width: 0;
z-index: 99;
background: #FFF;
margin-left: 46px;
}
/* for parent bar */
.yp-parent-tree-visible .yellow_pencil_iframe {
height: 100%; /* for old browsers */
height: -ms-calc(100% - 28px);
height: -o-calc(100% - 28px);
height: calc(100% - 28px);
}
/* metric and parent bar */
body:not(.yp-metric-disable):not(.yp-responsive-device-mode) .yellow_pencil_iframe{
height: -ms-calc(100% - 26px - 28px);
height: -o-calc(100% - 26px - 28px);
height: calc(100% - 26px - 28px);
}
body.yp-responsive-device-mode .editor-panel{
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
}
.editor-panel,.editor-leftbar {
display: none !important;
}
.yellow-pencil-logo {
bottom: 0;
left: 0;
position: fixed;
background-image: url(../images/logo.png);
background-size: 44px;
width: 46px;
height: 46px;
z-index: 999;
background-repeat: no-repeat;
background-position: center;
opacity: 0.25;
color: #FFF;
}
body.yellow-pencil-ready .editor-panel,body.yellow-pencil-ready .editor-leftbar {
display: block !important;
}
.yp_background_assets {
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: rgba(0, 0, 0, 0.1) 0px 0px 6px 0px;
}
.yp_background_assets div {
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;
}
.yp_background_assets div:nth-child(odd) {
border-left-width: 0px !important;
border-right-width: 0px !important;
}
.yp_background_assets div:nth-child(1),.yp_background_assets div:nth-child(2),.yp_background_assets div:nth-child(3),.yp_background_assets div:nth-child(4){
border-top-width:0px !important;
}
.yp_background_assets div.active {
box-shadow: inset 0 0 0 2px #0080FF !important;
}
.context-menu-root li span::-moz-selection,.yp-selected-tooltip::-moz-selection,.yp-selected-tooltip small::-moz-selection,.editor-panel::-moz-selection,.editor-panel :not(input):not(textarea)::-moz-selection {
background: transparent !important;
color: inherit !important;
}
.context-menu-root li span::-moz-selection, .yp-selected-tooltip::-moz-selection, .yp-selected-tooltip small::-moz-selection, .editor-panel::-moz-selection, .editor-panel :not(input):not(textarea)::-moz-selection {
background: transparent !important;
color: inherit !important;
}
.context-menu-root li span::selection,.yp-selected-tooltip::selection,.yp-selected-tooltip small::selection,.editor-panel::selection,.editor-panel :not(input):not(textarea)::selection {
background: transparent !important;
color: inherit !important;
}
.context-menu-root li span::-moz-selection,.yp-selected-tooltip::-moz-selection,.yp-selected-tooltip small::-moz-selection,.editor-panel::-moz-selection,.editor-panel :not(input):not(textarea)::-moz-selection {
background: transparent !important;
color: inherit !important;
}
.context-menu-root {
box-shadow: 0 0 20px 4px rgba(0,0,0,0.08) !important;
-webkit-box-shadow: 0 0 20px 4px rgba(0,0,0,0.08) !important;
-moz-box-shadow: 0 0 20px 4px rgba(0,0,0,0.08) !important;
border: 1px solid rgba(0,0,0,0.14);
margin-left: 46px;
}
/* ---------------------------------------------------- */
/* Basic Styles */
/* ---------------------------------------------------- */
.yp-clear {
clear: both !important;
}
/* ---------------------------------------------------- */
/* Left Area Styles */
/* ---------------------------------------------------- */
.editor-panel {
position: fixed !important;
right: 10px;
margin-right: 21px;
top: 14px;
z-index: 100046;
display: block;
width: 288px;
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;
-o-box-shadow: 0px 0px 2px 0px rgba(66, 133, 244, 0.4) !important;
box-shadow: 0px 0px 2px 0px rgba(66, 133, 244, 0.4) !important;
border-radius:3px !important;
}
.yp-responsive-device-mode .editor-panel {
margin-top: 42px !important;
}
.yp-fixed-right-panel .editor-panel{
transition: none;
}
.yp-fixed-right-panel .editor-panel .ui-resizable-handle.ui-resizable-e{
display:none !important;
}
.editor-panel.ui-draggable-dragging *{
pointer-events:none;
}
body .editor-panel-inner{
border-left: 1px solid #D1D1D1;
border-right: 1px solid #D1D1D1;
border-bottom: 1px solid #D1D1D1;
}
.wqminicolors-panel {
z-index: 100047;
}
.editor-panel input {
margin-bottom: 0 !important;
box-shadow: none !important;
}
/* Fixed Editor panel style */
.yp-fixed-right-panel:not(.yp-animate-manager-active):not(.yp-clean-look-manual) .editor-panel{
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;
}
.yp-fixed-right-panel:not(.yp-clean-look-manual) .editor-panel-top, .yp-fixed-right-panel:not(.yp-clean-look-manual) .editor-panel-top *{
border-radius:0px !important;
}
/* Reset theme styles for left area */
.editor-panel ul:before,.editor-panel li:before,.editor-panel a:before,.editor-panel ul:after,.editor-panel li:after,.editor-panel a:after {
display: none !important;
visibility: hidden !important;
}
.editor-panel ul,.editor-panel li,.editor-panel h3 {
text-align: left !important;
text-transform: none !important;
}
.editor-panel * {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.editor-panel .editor-panel-top {
position: absolute;
left: 0;
right: 0;
height: 45px !important;
padding: 0 15px !important;
margin: 0 !important;
background: #585858;
cursor: move !important;
border-radius: 3px 3px 0 0;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset !important;
}
.editor-panel .editor-panel-top{
cursor: move !important;
}
body.yp-fixed-right-panel:not(.yp-clean-look-manual) .editor-panel{
background-color:#f5f5f5 !important;
}
body.yp-fixed-right-panel:not(.yp-clean-look-manual):not(.yp-content-selected) .editor-panel{
background-color:#f8f8f8 !important;
}
.editor-panel .editor-panel-top .yp-button{
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: 500;
font-size: 15px;
cursor: pointer !important;
line-height:45px;
font-family: 'Roboto', sans-serif;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset !important;
transition: background 150ms ease;
}
.editor-panel .editor-panel-top .yp-button.yp-disabled{
cursor: default !important;
}
.editor-panel .editor-panel-top .yp-button:not(.yp-disabled):hover{
background:#7C9D53;
}
.yp-disabled {
opacity: .85 !important;
}
.editor-panel .editor-panel-top .yp-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.7;
background-size:20px;
transition: opacity 100ms ease;
}
.editor-panel .editor-panel-top .yp-button-manage:hover{
opacity:0.8;
}
.yp-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 #929292;
background-repeat: no-repeat;
opacity:0.64;
transition: opacity 100ms ease;
}
.yp-button-live.live-btn-loading {
background-image: url(../images/live-loading.gif);
}
.yp-button-live:hover{
opacity:0.74;
}
.editor-panel-inner{
overflow: hidden;
margin-top:45px;
min-height:295px;
}
.editor-panel .editor-panel-list {
margin: 0;
padding: 0;
width: 100%;
position:relative;
}
.editor-panel-list.list-active{
background-color:#f8f8f8;
}
.yp-content-selected .editor-panel .yp-panel-no-selection {
display: none;
}
body:not(.yp-content-selected) .editor-panel .editor-panel-list {
display: none;
}
.editor-panel .yp-panel-no-selection {
width: 100%;
color: #464646 !important;
background-color:#f8f8f8;
}
.yp-fixed-right-panel.yp-parent-tree-visible .yp-panel-no-selection{
height:calc(100vh - 70px - 45px - 28px); /* 28px parent, 70px customizing area, 45px top bar */
}
.yp-fixed-right-panel:not(.yp-parent-tree-visible) .yp-panel-no-selection{
height:calc(100vh - 70px - 45px); /* 28px parent, 70px customizing area, 45px top bar */
}
.editor-panel .yp-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;
font-family: "Roboto", sans-serif;
}
body.customization-type-popup-3 .editor-panel .yp-panel-no-selection .starter-notice{
padding: 52px 40px;
}
.editor-panel .yp-hand {
background-image: url(../images/hand.png);
width: 50px;
height: 50px;
display: inline-block;
background-size:100%;
}
.yp-hand-after{
margin-top:10px;
}
.yp-content-selected .editor-panel .yp-panel-no-selection {
display: none;
}
.editor-panel .editor-panel-list > li > h3 {
border-bottom: 1px solid #E3E3E3 !important;
background-color:#f8f8f8;
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;
}
.editor-panel-list > li > h3:before{
speak: none;
text-transform: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute !important;
right: 11px !important;
top: 50% !important;
margin-top: -10px;
pointer-events:none;
display: inline-block !important;
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
line-height: 1 !important;
font-family: 'dashicons' !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: "\f140";
}
.editor-panel-list > li.active > h3:before{
opacity: .8 !important;
content:"\f142";
}
.editor-panel-list > li > h3:after{
content: " ";
display: block;
opacity:0;
}
.editor-panel-list > li > h3.yp-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;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
.editor-panel .editor-panel-list,.editor-panel .editor-panel-list > li {
list-style-type: none !important;
}
.editor-panel .editor-panel-list > li:not(.active) h3:hover {
color: #252525 !important;
background-color: #ededed;
}
.editor-panel .editor-panel-list > li:not(.active):not(.extra-option) h3:hover {
border-bottom: 1px solid #E1E1E1 !important;
box-shadow: 0px -1px 0px 0px #E1E1E1 !important;
}
.editor-panel-list > li.active > h3{
color: #5d5d5d !important;
background-color: #e9e9e9;
border-bottom: 1px solid #D2D2D2 !important;
font-weight: 600 !important;
position: sticky !important;
top: 0px;
z-index: 2147483646;
}
.editor-panel .yp-this-content {
display: none;
padding: 0;
background: #f5f5f5;
}
.editor-panel .editor-panel-list > li.active .yp-this-content {
border-bottom-width: 0 !important;
}
.editor-panel .editor-panel-list > li {
background: #f5f5f5;
}
.editor-panel .editor-panel-list > li.disabled {
display:none !important;
}
.editor-panel a {
text-decoration: none !important;
position: static;
}
.editor-panel .yp-save-btn {
position: relative !important;
border-radius: 0 3px 0 0;
}
.editor-panel .yp-option-label {
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;
font-family: 'Roboto', sans-serif;
}
/* input hovers */
.editor-panel .yp-option-label span {
font-weight: inherit !important;
color: inherit !important;
margin-right:1px;
cursor:help;
}
.editor-panel input[type="text"]:hover,.editor-panel input[type="number"]:hover,.editor-panel .yp-input-wrapper:hover input{
border-color:#777 !important;
}
.editor-panel .grid-format:hover{
border-color:#777 !important;
}
.editor-panel input[type="text"]:focus,.editor-panel input[type="number"]:focus{
border-color:#0080FF !important;
}
.editor-panel .grid-format:focus{
border-color:#0080FF !important;
}
.editor-panel .yp-gradient-btn:hover,
.editor-panel .yp-bg-img-btn:hover,
.editor-panel .yp-unsplash-btn:hover{
border-color:#0080FF !important;
}
/* Colorpicker */
.editor-panel input.yp-input {
font-size: 12px !important;
line-height: 16px !important;
background: #FFF !important;
color: #4e4e4e !important;
border-radius: 3px !important;
-webkit-border-radius: 3px !important;
-moz-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;
}
.editor-panel input.wqcolorpicker{
display:none;
}
.editor-panel input.yp-input {
padding: 7px 4px !important;
transition: all 0 ease !important;
}
.yp-textarea {
width: 100%;
border: 1px solid #BBB;
background: #FEFEFE;
padding: 6px;
}
/* Radio */
.editor-panel .yp-radio input {
display: none !important;
}
.editor-panel .yp-radio > 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;
}
.yp-radio .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
opacity:0.9;
}
.yp-radio svg{
margin: 0 auto;
display: block;
}
#background-repeat-group .yp-radio svg{
opacity:0.9;
}
.yp-radio-grid-2 > .yp-radio:nth-child(2) > label{
border-right: 1px solid #BBB !important;
border-radius: 0 3px 3px 0;
}
.yp-radio-grid-3 > .yp-radio:nth-child(3) > label{
border-right: 1px solid #BBB !important;
border-radius: 0 3px 3px 0;
}
.yp-radio-grid-4 > .yp-radio:nth-child(4) > label{
border-right: 1px solid #BBB !important;
border-radius: 0 3px 3px 0;
}
.yp-radio-grid-5 > .yp-radio:nth-child(5) > label{
border-right: 1px solid #BBB !important;
border-radius: 0 3px 3px 0;
}
.yp-radio-grid-2 > .yp-radio:nth-child(2):hover,.yp-radio-grid-3 > .yp-radio:nth-child(3):hover,.yp-radio-grid-4 > .yp-radio:nth-child(4):hover,.yp-radio-grid-5 > .yp-radio:nth-child(5):hover{
margin-right:0px !important;
}
.yp-radio-grid-2 > .yp-radio:nth-child(1) > label{
border-radius: 3px 0 0 3px;
}
.yp-radio-grid-3 > .yp-radio:nth-child(1) > label{
border-radius: 3px 0 0 3px;
}
.yp-radio-grid-4 > .yp-radio:nth-child(1) > label{
border-radius: 3px 0 0 3px;
}
.yp-radio-grid-5 > .yp-radio:nth-child(1) > label{
border-radius: 3px 0 0 3px;
}
.editor-panel .yp-radio.active > label {
color: #1592E6 !important;
width: auto !important;
}
#border-style-group .yp-radio.active > label::after,#border-top-style-group .yp-radio.active > label::after,#border-right-style-group .yp-radio.active > label::after,#border-bottom-style-group .yp-radio.active > label::after,#border-left-style-group .yp-radio.active > label::after{
border-color:#1592E6;
}
.editor-panel .yp-radio-content{
display:flex;
}
.editor-panel .yp-radio {
flex-grow:1;
flex-shrink:1;
flex-basis:auto;
}
.editor-panel .yp-radio-content div.yp-radio.active + div.yp-radio > label{
border-left-color:#bbbbbb !important;
}
.editor-panel .yp-radio > label:hover {
border-color:#bbbbbb !important;
border-right-width:1px !important;
border-right-style:solid !important;
}
.editor-panel .yp-radio-content:not(#yp-border-type) .yp-radio:hover{
z-index:1000 !important;
}
.editor-panel .yp-radio:hover{
margin-right:-1px !important;
}
/* input-autocomplete */
.yp-select-data {
display: none !important;
}
.input-autocomplete {
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;
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
border: 1px solid #BBB !important;
padding: 6px 10px !important;
margin: 0 !important;
padding-right:26px !important;
}
.yp-select-option .autocomplete-parent-div{
position:relative;
}
.yp-select-option .autocomplete-parent-div: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: 'dashicons' !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: "\f140";
}
.yp-select-option .autocomplete-parent-div.active:after{
content:"\f142";
}
.input-autocomplete.active {
border-radius:3px 3px 0px 0px !important;
border-bottom-color: #EEE !important;
}
.input-autocomplete.active.up-style-autocomplete-input,.input-autocomplete.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 3px 3px !important;
list-style-type: none;
background-color:#FFFFFF !important;
}
.autocomplete-parent-div .ui-autocomplete{
width: 100% !important;
}
.ui-autocomplete.up-style-autocomplete,.ui-autocomplete.up-style-autocomplete-prefix{
border-radius:3px 3px 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;
}
#yp-autocomplete-place-font-family .ui-autocomplete li:not(.ui-autocomplete-category),
#yp-autocomplete-place-font-weight .ui-autocomplete li:not(.ui-autocomplete-category),
#yp-autocomplete-place-text-shadow .ui-autocomplete li:not(.ui-autocomplete-category){
font-size:18px !important;
}
.editor-panel .autocomplete-div li.ui-autocomplete-category,.editor-panel .autocomplete-div li.ui-autocomplete-category:hover,.editor-panel .autocomplete-div li.ui-autocomplete-category.ui-state-focus {
font-weight: 600;
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;
}
.autocomplete-div {
position: relative;
top:-1px;
}
.is-important {
background: red !important;
}
.yp-gradient-btn,.yp-bg-img-btn,.yp-unsplash-btn{
display: block !important;
margin-top: 4px !important;
font-size: 10px !important;
color: #626262 !important;
padding: 3px 6px !important;
border: 1px solid #CCC;
background: #FFF !important;
cursor: pointer !important;
font-weight: 600 !important;
position:relative !important;
z-index:10;
}
.yp-gradient-btn{
left:-1px;
}
.yp-bg-img-btn{
left:-2px;
}
.yp-gradient-btn:hover,.yp-bg-img-btn:hover,.yp-unsplash-btn:hover{
z-index:9999;
}
.yp-unsplash-btn{
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.yp-bg-img-btn{
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.yp-gradient-btn.active,.yp-bg-img-btn.active,.yp-unsplash-btn.active{
border-width: 0 !important;
background: #0080FF !important;
color: #FFF !important;
padding: 4px 7px !important;
z-index:100;
}
.yp-theme-c{
position:relative !important;
}
.yp-theme-c i{
content:"" !important;
width:100% !important;
height:100% !important;
position:absolute !important;
top:0 !important;
left:0 !important;
pointer-events: none !important;
}
.yp-bg-img-btn,.yp-gradient-btn,.yp-unsplash-btn{
float: left !important;
}
.yp-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 .yp-css-format,body .yp-bgs-prefix {
border-radius: 0 2px 2px 0 !important;
width:32px;
max-width:32px;
padding:0px 1px !important;
}
body .yp-css-value,body .yp-bgs-css-val {
border-radius: 2px 0 0 2px !important;
margin-right:-1px !important;
padding-left: 0px !important;
padding-right: 0px !important;
width:50px !important;
max-width:50px !important;
}
.yp-css-value:hover,.yp-css-value:focus,.yp-bgs-css-val:hover,.yp-bgs-css-val:focus{
position:relative;
z-index:999;
}
.editor-panel .bootstrap-select {
display: none !important;
}
.yp-css-format,.yp-bgs-prefix {
margin-left: 0 !important;
}
.yp-after {
font-size: 0 !important;
}
.yp-after small {
font-size: 10px !important;
padding-left: 4px !important;
color: #848484 !important;
}
input:focus{
outline:none !important;
}
.yp-this-content > .yp-option-group:last-child {
border-bottom-width: 0 !important;
}
.editor-panel .yp-customizing-section{
padding-top: 9px;
padding-bottom: 7px;
border-bottom: 1px solid #CFCFCF;
background-color:#E5E5E5;
position: sticky;
top:0;
z-index: 2147483647;
}
.property-responsive-open .editor-panel .yp-customizing-section{
z-index: 2147483646;
}
.editor-panel .yp-customizing-section,.editor-panel .yp-customizing-section small,.editor-panel .yp-customizing-section div,.editor-panel .yp-customizing-section .yp-customizing-inner{
cursor: default !important;
}
.editor-panel .editor-panel-footer {
background-color:#E5E5E5;
border-top:1px solid #CFCFCF;
position:relative;
}
.editor-panel-footer .yp-panel-hide{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
position: absolute;
bottom: 8px;
right: 11px;
opacity: 0.36;
cursor: pointer;
color: #000;
}
.editor-panel-footer .yp-panel-hide:hover{
opacity:0.5;
}
.yp-panel-show{
position: fixed;
z-index: 2147483647;
margin-top: -10px;
right: 0px;
opacity: 0.6;
cursor: pointer;
color: #000;
display: none;
background-color:#d4d4d4;
width: 40px;
height: 40px;
line-height: 40px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.yp-panel-show:hover{
opacity:0.6;
}
.yp-clean-look .yp-panel-show,.yp-clean-look-manual .yp-panel-show{
display:block;
}
.yp-shortcut-char{
display:inline-block;
padding-left:2px;
opacity:0.6;
}
.editor-panel .yp-customizing-section > .yp-customizing-inner{
padding-left:10px !important;
padding-right:10px !important;
}
.editor-panel .yp-customizing-section #yp-current-element{
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;
font-family: 'Roboto', sans-serif;
-webkit-transform:translateX(-2px);
transform:translateX(-2px);
}
body.yp-content-selected .editor-panel .yp-customizing-section #yp-current-element{
color: rgb(11, 133, 215);
}
#yp-current-element{
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 #yp-current-element{
pointer-events:none;
}
.editor-panel .yp-customizing-section #yp-current-element:hover,body.yp-current-element-menu .editor-panel .yp-customizing-section #yp-current-element{
background-color: rgba(104, 104, 104, 0.15);
}
body:not(.yp-content-selected) .editor-panel .yp-customizing-section #yp-current-element{
background-color: transparent;
opacity:0.85;
pointer-events:none;
}
.editor-panel .yp-customizing-section #yp-current-element:after {
content: "";
position: absolute;
margin-left: 6px;
border: 1px solid #CCC;
padding: 3px 3px;
text-transform: uppercase;
font-size: 10px;
margin-top: -4px;
border-radius: 2px;
display:none;
pointer-events:none;
}
body.yp-content-selected[data-yp-selector=":hover"] .context-menu-root > .yp-contextmenu-pseudo-classes:after,
body.yp-content-selected[data-yp-selector=":focus"] .context-menu-root > .yp-contextmenu-pseudo-classes:after,
body.yp-content-selected[data-yp-selector=":link"] .context-menu-root > .yp-contextmenu-pseudo-classes:after,
body.yp-content-selected[data-yp-selector=":visited"] .context-menu-root > .yp-contextmenu-pseudo-classes:after,
body.yp-content-selected[data-yp-selector=":active"] .context-menu-root > .yp-contextmenu-pseudo-classes:after,
body.yp-content-selected[data-yp-selector=":checked"] .context-menu-root > .yp-contextmenu-pseudo-classes:after,
body.yp-content-selected[data-yp-selector=":disabled"] .context-menu-root > .yp-contextmenu-pseudo-classes:after,
body.yp-content-selected[data-yp-selector=":enabled"] .context-menu-root > .yp-contextmenu-pseudo-classes:after,
body.yp-content-selected[data-yp-selector=":invalid"] .context-menu-root > .yp-contextmenu-pseudo-classes:after,
body.yp-content-selected[data-yp-selector=":valid"] .context-menu-root > .yp-contextmenu-pseudo-classes:after{
opacity: 1;
position: absolute;
right: 16px;
top: 50%;
width: 6px;
height: 6px;
margin-top: -4px;
margin-left: -3px;
background-color:rgba(134, 134, 134, 0.7);
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
content: "";
display: block;
}
body.yp-content-selected[data-yp-selector=":hover"] .editor-panel .yp-customizing-section #yp-current-element:after{
display: inline-block;
content:"hover";
}
body.yp-content-selected[data-yp-selector=":focus"] .editor-panel .yp-customizing-section #yp-current-element:after{
display: inline-block;
content:"focus";
}
body.yp-content-selected[data-yp-selector=":link"] .editor-panel .yp-customizing-section #yp-current-element:after{
display: inline-block;
content:"link";
}
body.yp-content-selected[data-yp-selector=":visited"] .editor-panel .yp-customizing-section #yp-current-element:after{
display: inline-block;
content:"visited";
}
body.yp-content-selected[data-yp-selector=":active"] .editor-panel .yp-customizing-section #yp-current-element:after{
display: inline-block;
content:"active";
}
body.yp-content-selected[data-yp-selector=":checked"] .editor-panel .yp-customizing-section #yp-current-element:after{
display: inline-block;
content:"checked";
}
body.yp-content-selected[data-yp-selector=":disabled"] .editor-panel .yp-customizing-section #yp-current-element:after{
display: inline-block;
content:"disabled";
}
body.yp-content-selected[data-yp-selector=":enabled"] .editor-panel .yp-customizing-section #yp-current-element:after{
display: inline-block;
content:"enabled";
}
body.yp-content-selected[data-yp-selector=":invalid"] .editor-panel .yp-customizing-section #yp-current-element:after{
display: inline-block;
content:"invalid";
}
body.yp-content-selected[data-yp-selector=":valid"] .editor-panel .yp-customizing-section #yp-current-element:after{
display: inline-block;
content:"valid";
}
.editor-panel .yp-customizing-section #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;
font-family: 'Roboto', sans-serif;
transition: background-color 150ms;
border-radius: 3px;
background-repeat: no-repeat;
background-size: 17px 17px;
background-position: 3px 3px;
}
.editor-panel .yp-customizing-section #customizing-mode:hover,.editor-panel .yp-customizing-section #customizing-mode.active{
background-color: rgba(0,0,0,.05);
}
#customizing-mode[data-this-type="global"]{
background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 64 64' version='1.1' viewBox='0 0 64 64' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23646464' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='3'%3E%3Cpath d='m14.14 7.465'/%3E%3Ccircle cx='31.988' cy='32.02' r='29.98'/%3E%3Cline x1='32.013' x2='32.013' y1='2' y2='61.96'/%3E%3Cline x1='2.032' x2='61.992' y1='31.979' y2='31.979'/%3E%3Cpath d='m32.013 46.423'/%3E%3Cpath d='m32.013 2'/%3E%3Cpath d='m32.013 61.96'/%3E%3Cpath d='m32.013 2'/%3E%3Cpath d='m32.013 61.96'/%3E%3Cellipse cx='31.848' cy='32.021' rx='18.13' ry='29.979'/%3E%3Cpath d='m12.593 9.515c0 2.749 8.683 7.787 19.396 7.787 10.712 0 19.393-5.04 19.393-7.787'/%3E%3Cpath d='m12.593 54.775c0-2.748 8.683-7.787 19.396-7.787 10.712 0 19.393 5.041 19.393 7.787'/%3E%3C/g%3E%3C/svg%3E%0A");
}
#customizing-mode[data-this-type="template"]{
background-image: url("data:image/svg+xml,%3Csvg width='128pt' height='128pt' version='1.1' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23646464'%3E%3Cpath d='m21.41 0h70.58c8.67 8.73 16.92 17.87 25.57 26.63 0.04 30.44-0.02 60.87 0.03 91.31-3.34 0.05-6.67 0.02-10.01 0.05-0.02 3.33 0 6.67-0.02 10.01h-96.15c-0.06-39.3 0.07-78.59-0.07-117.89 3.35-0.15 6.7-0.06 10.05-0.1 0.01-3.33 0-6.67 0.02-10.01m5.31 5.61c0.05 35.59 0.05 71.19 0 106.78 28.51 0.14 57.03 0.12 85.54 0.01-0.05-27.27-0.03-54.53-0.01-81.8-8.2-0.24-16.41 0.08-24.6-0.16 0.17-8.26-0.1-16.52 0.15-24.78-20.35-0.25-40.73-0.15-61.08-0.05m66.56 3.63c-0.12 5.23-0.04 10.46-0.05 15.69 4.92 0.37 9.88 0.09 14.82 0.14-4.53-5.6-9.9-10.51-14.77-15.83m-76.56 6.37c0.05 35.59 0.05 71.19 0 106.78 28.51 0.14 57.02 0.12 85.53 0.01-0.01-1.4 0-2.81 0.02-4.21-26.95-0.54-53.93-0.02-80.9-0.26 0.06-34.13 0.01-68.27 0.03-102.41-1.56 0-3.12 0.03-4.68 0.09z'/%3E%3Cpath d='m39.21 46.15c19.72 0.07 39.44-0.05 59.17 0.07-0.02 1.77 0 3.54 0.05 5.31-19.76 0.32-39.53 0.08-59.29 0.12 0-1.83 0.02-3.67 0.07-5.5z'/%3E%3Cpath d='m39.17 64.22c19.28 0.02 38.55-0.03 57.82 0.02 0.37 0.06 1.11 0.19 1.48 0.25-0.09 1.67-0.12 3.35-0.08 5.03-19.73 0.14-39.46-0.01-59.2 0.07-0.03-1.79-0.06-3.58-0.02-5.37z'/%3E%3Cpath d='m39.21 81.96c19.73 0.04 39.48-0.23 59.19 0.22-0.02 1.76-0.03 3.53-0.02 5.3-19.71 0.14-39.43-0.03-59.14 0.09-0.13-1.87-0.08-3.74-0.03-5.61z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
#customizing-mode[data-this-type="single"]{
background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 64 64' version='1.1' viewBox='0 0 64 64' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23646464' stroke-miterlimit='10' stroke-width='3'%3E%3Cg stroke-linejoin='round'%3E%3Cline x1='15.341' x2='47.748' y1='26.542' y2='26.542'/%3E%3Cline x1='15.341' x2='47.748' y1='36.251' y2='36.251'/%3E%3Cline x1='15.341' x2='47.748' y1='45.959' y2='45.959'/%3E%3C/g%3E%3Cpolygon points='43.437 1.5 7.218 1.5 7.218 62.5 56.781 62.5 56.781 15.083 43.676 1.5'/%3E%3Cpolyline points='56.781 15.083 43.437 15.083 43.437 1.5'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.editor-panel .yp-customizing-section .yp-this-content {
padding: 0 !important;
margin: 0 !important;
}
.editor-panel .editor-panel-footer h3 a {
cursor: pointer !important;
text-decoration: none !important;
}
.editor-panel .editor-panel-footer h3 {
text-align: center !important;
}
.editor-panel .editor-panel-footer h3 a,.editor-panel .editor-panel-footer > h3 {
color: #666 !important;
font-size: 10px !important;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
}
.editor-panel .editor-panel-footer h3 a:first-child {
font-weight: 500 !important;
}
.editor-panel .editor-panel-footer h3 a:hover {
text-decoration: underline !important;
}
.editor-panel .editor-panel-footer {
padding-top: 0 !important;
}
.editor-panel .yp-customizing-section .yp-this-content p {
padding: 10px 20px 15px !important;
margin: 0 !important;
line-height: 19px !important;
color: #444 !important;
}
.editor-panel .yp-close-btn-link {
text-decoration: none !important;
}
.device-name{
display:block;
margin-top:10px;
color:#3b3b3b;
}
.device-size{
background: rgba(0,0,0,0.1);
padding: 2px;
color:#212121;
border-radius: 2px;
}
.media-control {
border-bottom:2px solid #656565;
cursor: pointer;
}
.editor-panel .yp-close-btn {
position: absolute !important;
top: 0 !important;
left: 0 !important;
border-right: 1px solid #929292 !important;
cursor: pointer !important;
text-decoration: none !important;
background-size: 15px;
width: 46px;
height: 45px;
display: inline-block;
background-position: center center;
border-right: 1px solid #929292;
background-repeat: no-repeat;
opacity:0.64;
font-size:0px;
transition: opacity 100ms ease;
}
.visual-manager-close, .editor-panel .yp-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");
}
.editor-panel .yp-close-btn:hover{
opacity:0.74;
}
.editor-panel .yp-close-btn.dashicons-menu{
font-size: 27px;
line-height: 45px;
background-image: none !important;
font-family: 'dashicons' !important;
color: rgba(255,255,255,0.96) !important;
text-align: center;
}
.editor-panel .yp-collapse-select-bar .dashicons {
border-radius: 50% !important;
-moz-border-radius: 50% !important;
-webkit-border-radius: 50% !important;
background: #777 !important;
color: #FFF !important;
font-size: 18px !important;
font-weight: 400 !important;
font-family: 'dashicons' !important;
padding: 0 !important;
text-indent: -2px !important;
text-align: center !important;
text-decoration: none !important;
margin-right: 6px !important;
position: relative !important;
top: 0 !important;
cursor: pointer !important;
line-height: 18px !important;
width: 18px !important;
height: 18px !important;
transition: color .2s ease !important;
}
.yp-collapse-select-bar:hover {
color: #333 !important;
}
.yp-collapse-select-bar:hover .dashicons {
background: #333 !important;
}
.editor-panel .editor-panel-footer > h3 {
padding: 4px 12px !important;
line-height: 30px !important;
font-weight:500;
}
.editor-panel .editor-panel-footer > h3,.editor-panel .editor-panel-footer {
cursor: default !important;
}
.yp-fixed-right-panel:not(.yp-clean-look-manual) .editor-panel .editor-panel-footer{
position: fixed;
bottom: 0px !important;
right: 0px;
}
.yp-parent-tree-visible.yp-fixed-right-panel:not(.yp-clean-look-manual) .editor-panel .editor-panel-footer{
bottom: 28px !important; /* parent bar */
}
.yp-right-panel-placeholder{
width:60px;
background-color:rgba(56,153,236,0.3) !important;
position:fixed;
right:0px;
top:0px;
z-index:100;
height:100%;
display:none;
}
.yp-right-panel-placeholder.active{
background-color:rgba(56,153,236,0.5) !important;
}
body.yp-fixed-right-panel:not(.yp-clean-look-manual) .editor-panel-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,#contrast-filter-after,#hue-rotate-filter-after,#saturate-filter-after,#sepia-filter-after{
display: none !important;
}
#text-align-justify {
letter-spacing: 1.1px !important;
}
#opacity-group .yp-slider-div,#scale-transform-group .yp-slider-div,#rotatex-transform-group .yp-slider-div,#rotatey-transform-group .yp-slider-div,#rotatez-transform-group .yp-slider-div,#translate-x-transform-group .yp-slider-div,#translate-y-transform-group .yp-slider-div,#skew-x-transform-group .yp-slider-div,#skew-y-transform-group .yp-slider-div,#perspective-group .yp-slider-div,#blur-filter-group .yp-slider-div,#brightness-filter-group .yp-slider-div,#grayscale-filter-group .yp-slider-div,#contrast-filter-group .yp-slider-div,#hue-rotate-filter-group .yp-slider-div,#saturate-filter-group .yp-slider-div,#sepia-filter-group .yp-slider-div,#box-shadow-blur-radius-group .yp-slider-div,#box-shadow-spread-group .yp-slider-div,#box-shadow-horizontal-group .yp-slider-div,#box-shadow-vertical-group .yp-slider-div,#z-index-group .yp-slider-div{
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.yp-responsive-device-mode .yp-just-desktop,body.yp-responsive-device-mode .yp-just-desktop {
display: none !important;
}
.yp-advanced-option {
display: none;
}
.yp-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;
font-family: 'Roboto', sans-serif;
}
.yp-advanced-link.yp-on {
margin-bottom: 0 !important;
}
.yp-advanced-link.yp-margin-top {
margin-top: 6px !important;
}
.yp-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;
}
.yp-advanced-option .yp-option-group {
padding-left: 16px;
padding-right: 16px;
}
.yp-show {
display: block !important;
}
.yp-advanced-option .yp-option-group:last-child {
border-bottom-width: 0 !important;
}
.yp-live-editor-link {
display: none !important;
}
.yp-other-pages {
padding-top: 40px !important;
font-size: 14px !important;
text-align: left !important;
}
.yp-other-pages span {
font-weight: 600 !important;
color: #454545 !important;
font-size: 12px !important;
display: block !important;
margin-left: 4px !important;
text-transform: uppercase !important;
padding-bottom: 2px !important;
}
.yp-other-pages ul,.yp-other-pages li {
list-style-type:none !important;
}
.yp-other-pages li {
display: inline-block !important;
margin: 7px 2px !important;
}
.yp-other-pages li a{
font-size: 12px !important;
padding: 6px !important;
background: rgba(255,255,255,0.85) !important;
cursor: pointer !important;
color: #444 !important;
border-radius: 4px 4px 4px 4px !important;
}
body.browser_chrome .yp-other-pages li:not(.active) a{
color:#282828 !important;
}
.yp-other-pages li a:hover {
text-decoration: underline !important;
}
.yp-other-other-pages {
margin-top: 20px !important;
}
.yp-start-info {
cursor: help !important;
}
.yp-other-pages li.active a {
background: #80AE4E !important;
color: #FFF !important;
}
/* medium */
body.yp-responsive-device-mode #iframe {
left: 0;
top: 0;
width: 768px;
box-sizing: border-box;
overflow: hidden;
}
body.yp-responsive-device-mode.yp-parent-tree-visible #iframe {
height: calc(100% - 42px - 28px); /* editor-element-tree and metric breakpoint bars */
}
body.yp-responsive-device-mode:not(.yp-parent-tree-visible) #iframe {
height: calc(100% - 42px);
}
.responsive-right-handle {
width: 14px;
position: fixed;
z-index: 100;
cursor: e-resize;
background-image: url(../images/right-resize.png);
background-size: 4px 22px;
background-repeat: no-repeat;
background-position: center;
display: none;
background-color: rgba(255,255,255,0.3);
}
.width-animate-responsive-tool .responsive-right-handle,.width-animate-responsive-tool #iframe{
transition:height 180ms ease;
}
.responsive-right-handle:after{
background: #484848;
width: 2px;
height: 21px;
content: " ";
position: absolute;
top: -22px;
left:0px;
opacity:0.4;
pointer-events:none;
}
body.yp-responsive-device-mode .responsive-right-handle {
display: block;
}
body.yp-responsive-device-mode #iframe{
z-index:30 !important;
}
body.yp-responsive-resizing .metric-top-border {
display:none !important;
}
body.yp-responsive-device-mode .metric {
display: block !important;
background-image:url(../images/metric.png) !important;
background-color:#CECECE !important;
border-bottom: 1px solid #7e7e7e !important;
top: 20px;
height: 22px;
background-size: 2519px 19px;
background-color: #f9f9f9 !important;
border-bottom-color: #BABABA !important;
}
.breakpoint-bar{
display: none;
width: 100%;
height: 20px;
background-color: #fff;
position: fixed;
top: 0;
left: 46px;
z-index: 100;
border-bottom: 1px solid #CCC;
align-items: center;
}
.breakpoint-bar div{
height:20px;
text-align: right;
position: fixed;
left: 46px;
top:0px;
color: #3B3B3B;
text-transform: uppercase;
line-height: 20px;
font-size: 12px;
padding: 0 6px;
font-weight: 500;
font-family: 'Roboto', sans-serif;
border-right:1px solid #8B8989;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15),0 0px 3px rgba(0,0,0,0.2);
background-repeat: no-repeat;
background-color:#777;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
overflow:hidden;
cursor:pointer;
opacity:0.95;
}
.breakpoint-bar .breakpoint-right-notice,.breakpoint-bar .breakpoint-left-notice{
position: fixed;
font-size: 10px;
color: #757575;
height: 16px;
line-height: 16px;
width: 130px;
text-transform: uppercase;
pointer-events: none;
}
.breakpoint-bar .breakpoint-left-notice{
left: 46px;
text-align: right;
}
.breakpoint-bar .breakpoint-right-notice{
right: 0;
}
.breakpoint-bar div:hover{
opacity:1;
}
.breakpoint-bar div.focus{
z-index:10000 !important;
opacity:1;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.35),0 0px 3px rgba(0,0,0,0.35);
}
.breakpoint-bar .min-width{
background-image: url(../images/breakpoint-right.png);
background-size: 80px 20px;
text-align: left;
background-position: right;
}
.breakpoint-bar .max-width{
background-image: url(../images/breakpoint-left.png);
background-size: 80px 20px;
}
.breakpoint-bar div{
background-color:#a2a2a2;
text-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.breakpoint-bar div:not(.active){
background-color: rgba(162, 162, 162, 0.9);
}
.breakpoint-bar div.edited:not(.active){
background-color:rgba(152, 186, 113, 0.9);
}
.breakpoint-bar div.active.edited{
background-color:#98BA71;
}
#property-responsive-menu .property-responsive-item[data-responsive-size="all"][data-info="-"]{
display:none;
}
body.yp-responsive-device-mode .breakpoint-bar {
display: flex;
}
.yp-button-default-device,.yp-button-responsive-device-mode {
display: none;
cursor: pointer !important;
text-align: center !important;
}
.yp-button-default-device.active,.yp-button-responsive-device-mode.active {
display: block;
border-right: 1px solid #3D546C;
float: right;
cursor: pointer;
width: 50px;
height: 44px;
display: inline-block;
color: #849FBA;
font-size: 18px;
}
#cssData {
position: fixed;
top: 36px;
left: 0;
z-index: 99999;
padding: 20px;
display: none;
border-right: 1px solid #000;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body.yp-css-editor-active:not(.yp-css-editor-draggable) #cssData{
height: calc(100% - 36px) !important;
height: -webkit-calc(100% - 36px) !important;
}
body.css-error-message:not(.yp-css-editor-draggable) #cssData{
margin-top:26px;
height: calc(100% - (36px + 26px)) !important;
height: -webkit-calc(100% - (36px + 26px)) !important;
}
body.css-error-message.yp-css-editor-draggable #cssData{
margin-top:40px;
}
#cssEditorBar {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
height: 36px;
background: #171814;
font-size:0px !important;
line-height: 15px !important;
border-bottom:1px solid #3C3D39;
padding-left: 40px;
padding-right: 12px;
}
#cssEditorBar .editor-tabs{
display: inline-block;
color: #9e9e9e;
font-size: 12px;
background-color: #31312F;
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-family: 'Roboto', sans-serif;
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:#393937;
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: #8dcb46;
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;
}
.yp-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;
}
.yp-css-editor-detach:hover{
opacity:0.6;
}
body.yp-css-editor-draggable .yp-css-editor-detach{
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
}
#leftAreaEditor {
position: fixed;
left: 0;
top: 0;
z-index: 9999997;
height: 100%;
box-shadow: 10px 0 20px 0 rgba(0,0,0,0.2);
display: none;
}
body.yp-css-editor-active:not(.yp-css-editor-draggable) #leftAreaEditor{
height: 100% !important;
}
body.yp-css-editor-active:not(.yp-css-editor-draggable) .editor-leftbar {
box-shadow: none !important;
border-color:#dfdfdf !important;
-webkit-box-shadow: none !important;
}
#leftAreaEditor, #cssData, #cssEditorBar{
left:46px;
}
body.yp-css-editor-active #iframe {
margin-left: 0;
}
body:not(.yp-metric-disable):not(.yp-current-element-menu) .context-menu-root {
margin-top: 26px;
}
body.yp-responsive-device-mode:not(.yp-current-element-menu) .context-menu-root {
margin-top: 40px;
}
/* css editor new: detach. */
.yp-css-editor-draggable #cssEditorBar{
border-radius: 5px 5px 0 0;
cursor:move;
}
.yp-css-editor-draggable #cssData{
border-radius: 0 0 5px 5px;
}
.yp-css-editor-draggable #cssData{
height: 350px;
}
.yp-css-editor-draggable #leftAreaEditor{
height: calc(350px + 36px);
}
.yp-css-editor-draggable #leftAreaEditor{
box-shadow:none;
border-radius:5px;
box-shadow: 0px 0px 20px 0 rgba(0,0,0,0.4);
}
#left-bar{
position: absolute;
top: 0;
left: 0;
width: 46px;
height: 100%;
z-index:9999998;
}
body.yellow-pencil-ready #left-bar{
background-color: #000000;
}
body.yp-css-editor-active:not(.yp-css-editor-draggable) .editor-leftbar{
opacity:0.8;
}
.yp-css-editor-draggable #cssEditorBar,.yp-css-editor-draggable #cssData,.yp-css-editor-draggable #leftAreaEditor{
margin-top:14px;
margin-left:14px;
}
body.yp-css-editor-active.yp-css-editor-draggable #iframe{
margin-left: 46px;
}
.editor-leftbar {
position: fixed;
z-index: 9999998;
top: 0;
left: 0;
height: 100%;
background: #E7E7E7;
border-right:1px solid #A3A3A3 !important;
-o-box-shadow: 0px 0px 2px 0px rgba(66, 133, 244, 0.4) !important;
box-shadow: 0px 0px 2px 0px rgba(66, 133, 244, 0.4) !important;
width:46px !important;
}
.leftbar-button {
color:#606060;
font-size: 0;
padding:12.5px 10px;
cursor: pointer;
position:relative;
}
.left-menu-btn{
position: fixed;
top:auto !important;
bottom: 49px;
border-bottom: 1px solid #CCC;
}
.left-menu-btn span{
color:#8D8D8D;
}
.yp-responsive-btn.active:hover,.yp-search-btn.active:hover,.leftbar-button:not(.active):not(.disabled):not(.yp-responsive-btn):not(.yp-search-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: #484848;
margin-left: 45px;
height: 100%;
pointer-events: none;
display: block !important;
opacity: .7;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.1);
}
.metric-left-border {
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 99;
width: 100%;
background-color: #484848;
margin-top: 25px;
height: 2px;
pointer-events: none;
display: block !important;
opacity: .7;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.1);
}
body.yp-responsive-device-mode .metric-left-border {
margin-top: 0;
}
body.yp-responsive-resizing-right .metric-top-tooltip,body.yp-responsive-resizing-right .metric-left-border {
display: none !important;
}
body.yp-responsive-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: #545454;
color: #EEE;
font-size: 11px;
margin-top: 27px;
margin-left: 46px;
border-bottom-right-radius: 3px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
}
body.yp-responsive-device-mode .metric-top-tooltip {
margin-top: 2px;
}
.metric-left-tooltip {
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 99;
padding: 4px 8px;
pointer-events: none;
background-color: #545454;
color: #EEE;
font-size: 11px;
margin-left: 46px;
margin-top: 25px;
border-bottom-right-radius: 3px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
}
body.yp-responsive-device-mode .metric-left-tooltip {
margin-top: 41px;
}
body.yp-responsive-device-mode .metric-top-tooltip {
margin-top: 43px !important;
}
body.yp-responsive-device-mode .metric-top-tooltip {
margin-top: 0px;
}
body.yp-responsive-device-mode .metric-left-border {
margin-top: 0px;
}
.metric-top-tooltip span,.metric-left-tooltip span {
padding-left: 4px;
}
body.yp-metric-disable .metric-left-border,body.yp-metric-disable .metric-top-border {
display: none !important;
}
body.yp-metric-disable .metric-left-tooltip,body.yp-metric-disable .metric-top-tooltip {
display: none !important;
}
.metric {
position: fixed;
top: 0;
left: 46px;
width:2519px;
height:26px;
z-index: 99;
display: block;
border-bottom: 1px solid #ccc;
background-color: #f9f9f9;
background-repeat:no-repeat;
background-image:url(../images/metric.png);
background-size: 2519px 19px;
}
.yp-metric-disable .metric {
display: none;
}
body:not(.yp-metric-disable) #iframe {
margin-top: 26px;
}
body:not(.yp-metric-disable) .editor-panel{
margin-top: 26px;
}
body.yp-responsive-device-mode #iframe {
margin-top: 42px;
}
.css-editor-btn {
border-left-width: 0;
}
.leftbar-button.active:not(.yp-responsive-btn):not(.yp-search-btn):after,.yp-responsive-btn:not(.active):after,.yp-search-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 .dashicons {
font-size: 25px;
width: 25px;
height: 25px;
}
.yp-tooltip-shortcut {
opacity: 0.7;
display: block;
font-size: 90%;
}
.yp-tooltip-shortcut2 {
display: block;
font-size: 90%;
}
.yp-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;
}
.yp-css-close-btn {
font-family: 'dashicons';
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: 10px;
font-weight: 600;
color: rgba(255,255,255,0.8);
padding: 6px 10px;
height: 26px;
overflow: hidden;
}
#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.yp-clean-look:not(.yp-fixed-right-panel) .editor-panel,body.yp-clean-look-manual .editor-panel{
display: none !important;
}
body.yp-clean-look .yp-message-box,body.yp-clean-look-manual .yp-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: 100049;
box-shadow: 0 0 300px 0 rgba(255,255,255,0.2);
display: none;
border: 1px solid #5A5A5A;
padding-top: 10px;
}
#image_uploader_background {
background: rgba(0,0,0,0.6);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100048;
display: none;
cursor: -webkit-zoom-out !important;
cursor: zoom-out !important;
}
#selector-editor-background {
background: rgba(248,248,248,0.95);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999998;
display: none;
cursor: -webkit-zoom-out !important;
cursor: zoom-out !important;
}
#image_uploader iframe {
width: 100%;
height: 100%;
border-width: 0;
}
.yp-notice-last {
margin-top: 10px;
}
.little-break {
padding-top: 10px;
display: block;
}
.yp-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: 600;
pointer-events: none;
position: absolute;
top: auto;
left: auto;
border-radius: 3px;
margin-left: 5px;
}
.yp-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;
}
.yp-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(../images/diamond.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 237px auto;
font-family: "Roboto", sans-serif;
text-align: center;
border-radius: 4px;
color: #516280;
}
.yp-info-unlock-p{
color: #4E6EA6;
font-size: 14px;
width: 80%;
margin: 0 auto;
margin-bottom: 30px;
display: block;
font-weight: 500;
text-transform: capitalize;
}
.yp-action-area a {
border-radius: 3px;
text-decoration: none;
color: #FFF;
font-weight: 400;
font-size: 16px;
cursor: pointer;
transition: background-color 200ms ease;
}
.yp-info-modal-close {
padding: 9px 20px;
background-color: #999999;
margin-right: 20px;
}
.yp-info-modal-close:hover{
background-color: #888888;
}
.yp-buy-link {
padding: 13px 27px;
background-color: #F73859;
}
.yp-buy-link:hover{
background-color:#C62E46;
}
.yp-action-area {
margin-top: 220px;
display: block;
}
.yp-info-modal-top-inner h2{
margin-top: 35px;
font-weight: 500;
color: #2D4271;
margin-bottom: 10px;
font-size: 24px;
}
.yp-info-modal-top-inner p{
font-size: 16px;
width: 65%;
margin: 0 auto;
line-height: 1.6;
}
.yp-info-last-note {
font-size: 13px;
width: 80%;
margin: 0 auto;
margin-top: 32px;
display: block;
}
.responsive-size-text {
position: fixed;
color: #2e2e2e;
text-shadow: 1px 1px 1px rgba(255,255,255,0.1);
font-size: 15px;
display: none;
font-family: "Roboto", sans-serif;
}
body:not(.responsive-text-bottom) .responsive-size-text{
padding-top:36px;
padding-left:30px;
}
.responsive-text-bottom .responsive-size-text{
left: 46px !important;
margin-left: 19px !important;
}
body.responsive-text-bottom:not(.yp-parent-tree-visible) .responsive-size-text{
top: calc(100% - 42px - 31px) !important;
}
body.yp-parent-tree-visible.responsive-text-bottom .responsive-size-text{
top: calc(100% - 42px - 69px) !important;
}
.yp-responsive-resizing .responsive-add-breakpoint{
display:none;
}
.responsive-add-breakpoint{
position: fixed;
z-index: 101;
margin-left: -10px;
cursor: pointer;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
display:none;
opacity:0.9;
}
body:not(.yp-responsive-device-mode) .responsive-add-breakpoint{
display:none !important;
}
body.yp-responsive-resizing .responsive-add-breakpoint{
display:none !important;
}
.responsive-add-breakpoint span{
text-align: center;
width: 14px;
height: 14px;
font-size: 12px;
background-color: #f6f6f6;
color: #555;
border-radius: 100%;
text-align: center;
line-height: 15px;
box-shadow: 0 0 2px 1px rgba(0,0,0,0.5);
}
.tooltip-breakpoint-add .tooltip-inner{
text-align:center !important;
}
body.yp-responsive-resizing-right .metric-left-tooltip{
background-color:#B5B5B5 !important;
font-weight:600 !important;
color:#444444 !important;
box-shadow:none !important;
opacity:1 !important;
z-index:120 !important;
font-size:12px !important;
}
body.yp-responsive-resizing-right .metric-top-border{
background-color:#888888 !important;
}
.yp-responsive-device-mode .responsive-size-text {
display: block;
}
.yp-visual-editor-link-holder{
margin-left:22px;
}
.yp-visual-editor-link{
font-size: 8px !important;
color: #FFF !important;
padding: 4px !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;
}
.prefix-select{
position: relative;
}
.prefix-select ul{
right: 0px;
top: -4px;
}
.background-size-custom-group .prefix-select ul{
top:-19px !important;
}
.prefix-select ul .ui-state-focus{
background-color:transparent !important;
}
.prefix-select ul li:hover{
background-color:#EEE !important;
}
.prefix-select .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: 27%;
width: 46%;
margin-top: 140px;
z-index: 9999999;
font-size: 16px;
display: none;
height: auto;
}
#yp-selector-editor {
width:100%;
padding: 10px;
color: #FFF;
font-size:inherit;
background: #558FDB;
border-radius: 0px 3px 0 0;
-o-box-shadow: 0px 0px 2px 0px rgba(66, 133, 244, 0.4);
box-shadow: 0px 0px 2px 0px rgba(66, 133, 244, 0.4);
border: 1px solid #4076BD;
}
#yp-selector-editor.selector-is-invalid{
color:#e48080 !important;
}
#search.selector-is-invalid{
color:#c04141 !important;
border-color:#c04141 !important;
}
#autocomplate-selector-list {
margin-top:0px;
padding: 6px 7px;
min-height: 0;
list-style-type: none;
background: #eff2f5;
background: linear-gradient(to bottom, #ffffff 0%,#eff2f5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eff2f5',GradientType=0 );
border-left: 1px solid #DFE6EC;
border-right: 1px solid #DFE6EC;
border-bottom: 1px solid #DFE6EC;
}
#autocomplate-selector-list:empty{
display:none;
}
body.yp-selector-editor-active #selector-editor-box,body.yp-selector-editor-active #selector-editor-background{
display: block;
}
#autocomplate-selector-list li {
list-style-type: none;
padding: 4px 6px;
color: #717171;
cursor: pointer;
border-radius: 50px;
}
#autocomplate-selector-list li.active{
background-color: #D4E9FC;
}
#autocomplate-selector-list li:hover{
background-color: #E9E9E9;
}
.selector-editor-notice {
color: #5d5d5d;
font-size: 12px;
margin:0px 0 10px 0;
font-weight:600;
}
.yp-color-input-box {
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);
}
.wqminicolors-swatch-color {
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);
}
.yp-color-background{
z-index: 2147483645;
width: 50px;
height: 20px;
display: block;
border-radius: 4px;
cursor: pointer;
position: relative !important;
}
.yp-background-image-show {
width: auto;
height: auto;
max-height:100px;
margin-top: 6px;
border-radius: 3px;
background-color: #eaeaea;
}
.yp-option-container {
font-size: 0;
}
.yp-option-container:after, .yp-option-container:before {
clear: both;
content: "";
display: block;
}
.fade {
opacity: 0;
transition: opacity .15s linear;
}
.fade.in {
opacity: 1;
}
.collapse {
display: none;
}
.collapse.in {
display: block;
}
tr.collapse.in {
display: table-row;
}
tbody.collapse.in {
display: table-row-group;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition-property: height,visibility;
transition-duration: .35s;
transition-timing-function: ease;
}
.yp-has-box-shadow {
display: none;
}
body.yp-anim-creator .animation-option{
pointer-events:none;
}
body.yp-anim-creator .mobile-icon{
display:none !important;
}
.yp-add-animation-link{
background-image: url(../images/animate.png) !important;
background-size: 38px !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.yp-anim-creator .yp-add-animation-link{
display:none;
}
.anim-bar {
display: none;
position: fixed !important;
bottom: 4%;
left: 10px;
z-index: 100046;
width: auto !important;
background-color: #E9E9E9;
box-shadow:0 0 30px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 30px 2px rgba(0,0,0,0.4);
pointer-events:none;
opacity: 0;
visibility:hidden;
-webkit-transform: scale(0);
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;
}
.yellow-pencil-ready .anim-bar{
display:block;
}
body.yp-anim-creator .anim-bar {
pointer-events:auto;
opacity: 1;
visibility:visible;
-webkit-transform: scale(1);
transform: scale(1);
}
body.yp-anim-creator #font-family-group,body.yp-anim-creator #font-style-group,body.yp-anim-creator #text-decoration-group,body.yp-anim-creator #text-transform-group,body.yp-anim-creator #text-align-group,body.yp-anim-creator #float-group,body.yp-anim-creator #clear-group,body.yp-anim-creator #overflow-x-group,body.yp-anim-creator #background-image-group,body.yp-anim-creator #background-repeat-group,body.yp-anim-creator #background-attachment-group,body.yp-anim-creator #box-sizing-group,body.yp-anim-creator #background-image-group,body.yp-anim-creator #overflow-y-group,body.yp-anim-creator #display-group,body.yp-anim-creator #word-wrap-group,body.yp-anim-creator #position-group,body.yp-anim-creator #cursor-group,body.yp-anim-creator #pointer-events-group,body.yp-anim-creator #direction-group{
opacity: 0.7 !important;
cursor: default !important;
pointer-events: none !important;
}
body.yp-anim-creator .undo-btn,body.yp-anim-creator .redo-btn,body.yp-anim-creator .css-editor-btn,body.yp-anim-creator .yp-selector-mode,body.yp-anim-creator .yp-search-btn,body.yp-anim-creator .yp-sharp-selector-btn,body.yp-anim-creator .yp-responsive-btn {
opacity: 0.7;
cursor: default;
pointer-events: none;
}
.undo-btn,.css-editor-btn,.yp-ruler-btn{
border-top: 1px solid #CCC;
}
body.yp-animate-manager-active .undo-btn,body.yp-animate-manager-active .redo-btn {
opacity: 0.7;
cursor: default;
pointer-events: none;
}
body.yp-clean-look:not(.yp-clean-look-manual) .yp-panel-show{
display:none !important;
}
body.visual-css-view-active .yp-panel-show{
display:none !important;
}
body.yp-responsive-device-mode .yp-panel-show{
right:0px !important;
}
.yp-anim-recording {
display: none;
}
body.yp-anim-creator .yp-anim-recording {
display: inline-block;
background: #f44336;
color: #FFF;
padding: 1px 4px;
font-size: 10px;
font-weight: 600;
pointer-events: none;
position: absolute;
top:auto !important;
left:auto !important;
margin-top: -1px;
margin-left: 4px;
}
body.yp-anim-creator .animation-option {
background: #f5e8e8;
}
.scenes {
padding: 14px;
border: 1px solid #999;
border-top-width: 0px;
}
.scenes .scene {
float: left;
width: 100px;
height: 80px;
background: #FFFFFF;
z-index: 100046;
margin-right: 10px;
font-size: 12px;
font-weight:600;
color: #555;
line-height: 12px;
text-align: center;
cursor: pointer;
position: relative;
transition: background-color 100ms ease;
border: 1px solid rgba(0,0,0,0.2);
}
.scene-active{
border-color:transparent !important;
}
.scenes .scene-active{
background-color:#EAF7FF;
}
.scenes .scene:hover{
background-color:#f4fbff;
}
.scenes .scene .dashicons-trash {
position: absolute;
right: 2px;
top: 2px;
opacity: 0;
transition: opacity 100ms ease;
color: #BD2525;
}
.scene:not(.scene-let-delete) .dashicons-trash,.scene-2 .dashicons-trash,.scene-1 .dashicons-trash {
display: none !important;
}
.scenes .scene.scene-let-delete:hover .dashicons-trash {
opacity: .8;
}
.scenes .scene .scene-info {
color: #FFF;
display: none !important;
background-color: #0c7cc0;
width: 15px;
height: 15px;
line-height: 14px;
font-size: 10px;
margin-right: 2px;
font-style: italic;
position: absolute;
left: 2px;
bottom: 2px;
transition: opacity 100ms ease;
}
.scenes .scene-active .scene-info{
display:inline-block !important;
}
.scenes .scene p {
margin: 0;
margin-top: 19px;
}
.scenes .scene p span {
display: block;
}
.scenes .scene input {
display: inline-block;
width: 33px;
text-align: center;
background-color: rgba(211, 237, 255, 0.5);
border: 1px solid rgba(211, 237, 255, 0.5);
font-size: 10px;
color: #4a4a4a;
margin-top: 12px;
}
.anim-bar-title {
padding: 8px 14px;
font-weight: 600;
font-size: 12px;
color: #E0E0E0;
cursor: move;
background-color:#4D4D4D;
}
.anim-bar-title .anim-title {
float: left;
position: relative;
top: 2px;
}
.anim-bar-title .yp-anim-btn {
float: right;
display: inline-block;
text-transform: uppercase;
cursor: pointer !important;
padding: 0;
color: #B4B4B4 !important;
font-size: 0;
margin-left: 3px;
background: transparent !important;
position: relative;
top: -2px;
}
.anim-bar-title .dashicons-flag {
font-size: 20px !important;
margin-left: 3px !important;
position: relative !important;
top: 2px !important;
}
.anim-bar-title .yp-anim-btn span {
font-size: 24px;
}
.anim-bar-title .yp-anim-cancel {
margin-right: 5px;
}
.anim-bar-title .yp-anim-cancel span{
font-size: 27px;
position: relative;
top: -1px;
}
.anim-bar-title .yp-anim-play {
margin-right: 3px;
margin-left: 4px;
}
.yp-animate-test-playing .scenes{
pointer-events:none !important;
cursor:wait !important;
}
.anim-bar-title .yp-anim-btn.yp-anim-cancel:hover {
color:#ED9395 !important;
}
.anim-bar-title .yp-anim-btn.yp-anim-play:hover{
color: #B1E08A !important;
}
.anim-bar-title .yp-anim-btn.yp-anim-play:hover .dashicons-controls-pause{
color: #ED9395 !important;
}
.anim-bar-title .yp-anim-btn.yp-anim-save:hover {
color: #74E0F5 !important;
}
.scene-active {
outline: 2px solid #4285F4;
}
.scenes .scene-add .dashicons-plus {
position: relative;
top: 29px;
font-size: 24px;
width: 24px;
height: 24px;
}
.scenes .scene-add,.scenes .scene-6 {
margin-right: 0 !important;
}
body.yp-anim-creator #yp-autocomplete-place-background-position .ui-autocomplete {
max-height: 130px !important;
}
.yp-transform-link{
background-image: url(../images/transform.png) !important;
background-size: 80px !important;
background-color: #F6F3E0 !important;
border:1px solid #CCC9B8 !important;
background-position: -20px -18px !important;
background-repeat: no-repeat !important;
text-align: center !important;
}
.yp-filter-link{
background-image: url(../images/filter.png) !important;
background-size: 80px !important;
background-color: #CBE8E1 !important;
border:1px solid #A1D5C9 !important;
background-position: -13px -15px !important;
background-repeat: no-repeat !important;
text-align: center !important;
}
.yp-transition-link{
background-image: url(../images/transition.png) !important;
background-size: 46px !important;
background-color: #CBDBE8 !important;
border: 1px solid #A1B0D5 !important;
background-position: 6px center !important;
background-repeat: no-repeat !important;
text-align: center !important;
}
.ui-helper-hidden-accessible {
display: none !important;
}
.dashicons-editor-contract {
display: none;
}
.no-aiming-icon {
background-image: url(../images/cursor.png);
background-size:14px 18px;
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: inline-block;
position: relative;
left: 1px;
}
.yp-single-inspector-active .no-aiming-icon,.yp-flexible-inspector-active .no-aiming-icon{
display: none;
}
.aiming-icon {
background-image: url(../images/target.png);
background-size: 24px 24px;
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: inline-block;
}
.yp-single-inspector-active .aiming-icon,body:not(.yp-flexible-inspector-active) .aiming-icon{
display: none;
}
.css-editor-icon {
background-image: url(../images/css-editor.png);
background-size: 24px 22px;
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: inline-block;
}
.design-information-icon {
background-image: url(../images/design-information.png);
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: inline-block;
background-size: 22px 22px;
}
.responsive-icon{
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: inline-block;
background-size: 21px;
}
.leftbar-button .responsive-icon{
background-image: url(../images/responsive.png);
background-size:22px 22px;
opacity: 0.9;
}
.search-selector-icon{
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: inline-block;
}
.leftbar-button .search-selector-icon{
background-image: url(../images/search-selector.png);
background-size: 21px 22px;
}
.wireframe-icon{
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: inline-block;
}
.leftbar-button .wireframe-icon{
background-image: url(../images/wireframe.png);
background-size: 20px 22px;
}
.sharp-selector-icon {
background-image: url(../images/sharp-selector-icon.png);
background-size: 24px 24px;
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: none;
opacity: 0.95;
}
.yp-single-inspector-active .sharp-selector-icon {
display: inline-block;
}
.ruler-icon {
background-image: url(../images/ruler.png);
background-size:24px 23px;
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: inline-block;
}
.animation-manager-icon {
background-image: url(../images/animation.png);
background-size:24px 24px;
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: inline-block;
}
.undo-icon {
background-image: url(../images/undo-icon.png);
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: inline-block;
background-size: 22px 24px;
}
.redo-icon {
background-image: url(../images/redo-icon.png);
width: 24px;
background-repeat: no-repeat;
background-position: center;
height: 24px;
display: inline-block;
background-size: 22px 24px;
}
.redo-btn.disabled,.undo-btn.disabled{
opacity: 0.7;
cursor: default;
pointer-events: none;
}
.animation-manager-empty {
font-size: 18px;
position: absolute;
left: 50%;
top: 50%;
width: 600px;
margin: -30px 0 0 -300px;
color: #717171;
font-weight: 400;
text-align: center;
display: none;
height: 60px;
}
.animation-manager-empty small {
display: block;
margin-top: 10px;
color: #757575;
}
.yp-animate-manager {
position: fixed;
top:auto !important;
left: 46px;
bottom: 0;
width: -ms-calc(100% - 46px);
width: -o-calc(100% - 46px);
width: calc(100% - 46px);
background-color: #f5f5f5;
border-top: 1px solid #b9b9b9;
z-index: 9999;
font-size: 0;
box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);
display: none;
}
.yp-anim-el-column.anim-active-row {
background-color:#D4E9FC;
}
body .hidden-option {
pointer-events: none !important;
opacity: .7 !important;
}
body .hidden-option .yp-after input {
color: transparent !important;
}
.yp-animate-manager > div {
display: block;
}
.yp-anim-left-part-column {
width: 15%;
float: left;
z-index: 9999999;
position: relative;
left:0;
}
.yp-anim-right-part-column {
width: 85%;
float: left;
position: relative;
padding-top: 0;
}
.yp-anim-control-left {
width: 15%;
float: left;
padding-top: 25px;
}
.yp-anim-control-right {
width: 85%;
float: left;
position: relative;
padding-top: 25px;
}
.yp-animate-manager-inner {
overflow-y: scroll;
overflow-x: scroll;
}
.yp-anim-controls {
position: relative;
border-bottom: 1px solid #CCC;
}
.yp-anim-control-overflow {
overflow: hidden;
}
.yp-anim-el-column {
position: relative;
font-weight: 600;
background-color: #f1f1f1;
color: #424a50;
font-size: 12px;
padding: 13px 8px 0 26px;
width: 100%;
display: inline-block;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
height: 59px;
z-index:2147483647;
}
.yp-anim-process-bar-area {
background: #FFFFFF;
width: 100%;
display: inline-block;
border-bottom: 1px solid #e1e1e1;
vertical-align: top;
height: 59px;
padding-left: 5px;
position: relative;
}
.yp-anim-process-bar {
background: #558EEC;
color: #FFF;
display: block;
float: left;
height: 16px;
line-height: 16px;
font-size: 10px;
margin-top: 11px;
text-transform: uppercase;
text-align: center;
position: relative;
z-index: 99;
min-width: 20px !important;
}
.yp-anim-process-bar .animation-name{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display:block;
}
.yp-anim-process-bar-delay {
background: #e4e4e4;
background-image: url(../assets/pattern_7.png);
color: #FFF;
display: block;
float: left;
height: 16px;
line-height: 16px;
font-size: 10px;
margin-top: 11px;
text-transform: uppercase;
text-align: center;
}
.yp-animate-manager .ui-resizable-e {
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: e-resize;
position: absolute;
}
.yp-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%;
}
.yp-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 #9F9D9D;
position: relative;
top: 11px;
display: inline-block;
}
.second i {
width: 10px;
height: 3px;
border-right: 1px solid #E5E5E5;
display: inline-block;
}
.second b {
position: absolute;
right: -11px;
top: -14px;
width: 20px;
font-size: 11px;
text-align: center;
color: #827A7A;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-weight: 600;
}
.yp-delay-zero {
z-index: 9999 !important;
position: absolute !important;
}
.yp-anim-el-column label {
background: rgb(114, 176, 91);
padding: 1px 3px 2px;
border-radius: 4px;
color: #FFF;
font-weight: 400;
text-transform: capitalize;
font-size: 11px;
margin-left: 3px;
}
.yp-device-responsive {
color: #126E5D;
font-weight: 600;
display: block;
font-size: 11px;
margin-top: 4px;
opacity: 0.8;
}
.yp-type-anim-text{
position: absolute;
left: calc(100vw - 131px);
top: 10px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
color: #767676;
width: 60px;
text-align: right;
}
.yp-anim-manager-control {
position: absolute;
width: -ms-calc(15% - 6px);
width: -o-calc(15% - 6px);
width: calc(15% - 6px);
left: 4px;
height: 25px;
top: 0;
z-index: 999999;
background: #f5f5f5;
border-right: 1px solid #CCC;
padding-left:16px;
}
.yp-anim-control-btn {
cursor: pointer;
color: #666;
margin-right: 8px;
position: relative;
top: 1px;
}
.yp-anim-control-play:hover{
color: #0080FF;
}
.yp-anim-control-pause:hover, .yp-anim-control-close:hover{
color: #da4747;
}
.yp-anim-control-btn span {
font-size: 24px;
}
.yp-anim-control-close span{
font-size: 26px;
top: -1px;
position: relative;
}
.yp-animate-manager-playing .yp-anim-control-play{
display:none;
}
body:not(.yp-animate-manager-playing) .yp-anim-control-pause{
display:none;
}
.yp-anim-playing-border {
height: 100%;
background-color: red;
width: 1px;
position: absolute;
left: -1px;
top: 0;
z-index: 999;
}
.yp-anim-control-right .yp-anim-playing-border {
margin-left: -2px;
}
.yp-anim-playing-over {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.2);
z-index: 99999999;
display: none;
cursor: wait;
}
.yp-animate-manager-playing .yp-anim-playing-over {
display: block;
}
.yp-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;
}
.yp-anim-process-inner {
display: inline-block;
}
.yp-anim-add {
position: relative;
display: inline-block;
top: 4px;
right: -12px;
cursor: pointer;
background-image: url(../images/add.png);
background-repeat: no-repeat;
width: 22px;
height: 22px;
background-size: 22px;
}
.yp-anim-process-bar .animate-part-icons {
position: absolute;
left: 0;
top: 16px;
background: #4285F4;
color: #fff;
padding: 4px 0;
cursor: pointer;
width: 20px;
height: 20px;
display: none;
}
.yp-anim-process-bar .animate-part-icons span {
font-size: 14px;
line-height: 12px;
}
.yp-anim-process-bar-area:hover .animate-part-icons {
display: block;
}
.yp-anim-process-bar .animate-part-icons.yp-control-trash {
left: 0;
}
.yp-anim-has-zero-delay .animate-part-icons.yp-control-trash {
left: 10px;
}
.yp-anim-current-duration {
position: absolute;
top: 4px;
right: 0;
font-size: 14px;
font-weight: 600;
color: #707070;
padding-right: 10px;
}
body.yp-animate-manager-active .editor-panel {
display: none !important;
}
.yp-animate-manager-inner{
height: calc(100% - 26px) !important;
}
.yp-anim-list-menu {
display: none;
position: fixed;
z-index: 2147483647;
width: auto;
max-width:280px;
background-color: #FFF;
top: 0;
left: 0;
font-size: 13px;
margin-top: 36px;
border: 1px solid #CCC;
padding: 4px 0;
height: auto;
box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
}
.yp-anim-list-menu ul {
padding: 0;
list-style-type: none;
margin: 0;
max-height: 190px;
height: 190px;
overflow-y: scroll;
}
.yp-anim-list-menu li {
padding: 6px 10px;
cursor: pointer;
color: #555962;
}
.yp-anim-list-menu li:hover {
background-color: #D3EDFF;
}
.yp-anim-list-menu:not(.yp-anim-list-top):after,.yp-anim-list-menu:not(.yp-anim-list-top):before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.yp-anim-list-menu:not(.yp-anim-list-top):after {
border-color: rgba(255,255,255,0);
border-bottom-color: #fff;
border-width: 8px;
margin-left: -8px;
}
.yp-anim-list-menu:not(.yp-anim-list-top):before {
border-color: rgba(204,204,204,0);
border-bottom-color: #ccc;
border-width: 9px;
margin-left: -9px;
}
.yp-anim-list-top {
margin-top: -210px !important;
}
.yp-anim-list-top ul {
height: auto !important;
}
.yp-anim-list-top:after,.yp-anim-list-top:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.yp-anim-list-top:after {
border-color: rgba(255,255,255,0);
border-top-color: #fff;
border-width: 8px;
margin-left: -8px;
}
.yp-anim-list-top:before {
border-color: rgba(204,204,204,0);
border-top-color: #ccc;
border-width: 9px;
margin-left: -9px;
}
#scale-transform-value,#z-index-value,#flex-grow-value,#flex-shrink-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,#contrast-filter-value,#hue-rotate-filter-value,#saturate-filter-value,#sepia-filter-value,#brightness-filter-value {
border-radius: 2px !important;
border-right-width: 1px !important;
}
#flex-grow-after,#flex-shrink-after{
display:none !important;
}
#rotatex-transform-value,#rotatey-transform-value,#rotatez-transform-value,#perspective-value{
border-radius: 2px !important;
border-right-width: 1px !important;
}
#border-type-group .yp-option-label{
display:none !important;
}
#border-type-group{
padding:0px !important;
margin-top:-2px !important;
border-width:0px !important;
}
#border-type-group .yp-radio label{
border-radius: 0px !important;
background-color: #EDEDED !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 .yp-radio.active label{
border-radius: 0px !important;
background-color: #f5f5f5 !important;
color: #555555 !important;
border-bottom-color:#f5f5f5 !important;
}
#border-type-group .yp-radio #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 .yp-radio #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 .yp-radio #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 .yp-radio #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 .yp-radio #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;
}
.text-option h3 {
background-image: url(../images/list/text.svg);
}
.size-option h3 {
background-image: url(../images/list/size.svg);
}
.margin-option h3 {
background-image: url(../images/list/margin.svg);
}
.padding-option h3 {
background-image: url(../images/list/padding.svg);
}
.border-option h3 {
background-image: url(../images/list/border.svg);
}
.border-radius-option h3 {
background-image: url(../images/list/border-radius.svg);
}
.animation-option h3 {
background-image: url(../images/list/animation.svg);
}
.flex-option h3,.grid-option h3{
background-image: url(../images/list/flexbox.svg);
}
.position-option h3 {
background-image: url(../images/list/position.svg);
background-size:16px auto !important;
background-position:15px center !important;
}
.extra-option h3 {
background-image: url(../images/list/extra.svg);
}
.editor-panel .editor-panel-list .extra-option:not(.active) h3{
border-bottom-width: 0px !important;
}
.editor-panel .editor-panel-list > li.active .yp-option-group:last-child{
border-bottom-width: 0px !important;
}
.box-shadow-option h3 {
background-image: url(../images/list/box-shadow.svg);
}
.lists-option h3 {
background-image: url(../images/list/list.svg);
}
.background-option h3 {
background-image: url(../images/list/background.svg);
}
.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;
}
.sweet-alert p a {
color: #666;
}
.advanced-info-box {
position: absolute;
top: 344px;
left: 46px;
height:400px;
max-height:600px;
background-color: #f6f6f6;
z-index: 9999;
box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);
border-right:1px solid #9a9a9a;
border-bottom:1px solid #9a9a9a;
font-size: 0;
display: none;
}
.advanced-info-box-inner {
height: calc(100% - 30px);
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 {
position: relative;
top: -1px;
background-color: #CECECE;
border-top:1px solid #9a9a9a;
}
.advance-info-btns {
background-color:transparent;
color: #505050;
padding: 7px 10px;
display: inline-block;
font-size: 11px;
cursor: pointer;
font-weight: 600;
}
.advance-info-btns.active {
background-color: #E7E7E7;
}
.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:600;
}
.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;
max-width: 260px !important;
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-global-class-list li,.info-element-class-list li {
color: rgba(25, 96, 73, 0.8);
font-weight:600;
text-transform: lowercase !important;
}
.info-global-id-list li {
color: rgb(152, 83, 132);
font-weight: 600;
text-transform: lowercase !important;
}
.info-global-id-list li:hover, .info-global-class-list li:hover,.info-element-class-list li:hover{
cursor:pointer;
text-decoration:underline;
}
.info-no-element-selected {
text-align: center;
width: 50%;
margin: 30px auto;
line-height: 22px;
}
.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: 1px solid rgba(0,0,0,0.2);
resize: vertical;
height: 92px;
font-size:14px;
}
.advanced-close-link {
position: absolute;
top: -1px;
right: 0;
z-index: 999;
color: #505050;
cursor: pointer;
}
.advanced-close-link span {
width: 28px;
height: 27px;
text-align: center;
line-height: 28px;
font-size: 15px;
}
.editor-panel-list li.border-radius-option.active > h3 .yp-arrow-icon,.editor-panel-list li.margin-option.active > h3 .yp-arrow-icon,.editor-panel-list li.padding-option.active > h3 .yp-arrow-icon {
right: 60px !important;
}
body.yp-mouseleave .metric-left-tooltip,body.yp-mouseleave .metric-top-tooltip,body.yp-mouseleave .metric-left-border,body.yp-mouseleave .metric-top-border {
display: none !important;
}
body.yp-iframe-mouseleave:not(.yp-responsive-device-mode) .metric-left-tooltip,body.yp-iframe-mouseleave:not(.yp-responsive-device-mode) .metric-top-tooltip,body.yp-iframe-mouseleave:not(.yp-responsive-device-mode) .metric-left-border,body.yp-iframe-mouseleave:not(.yp-responsive-device-mode) .metric-top-border {
display: none !important;
}
.info-element-selector-list li {
text-transform: none !important;
}
.yp-anim-process-inner:empty + .yp-anim-add {
position: relative;
top: 17px;
}
.yp-yellow-pencil-demo-mode #wordpress-panel-btn{
display:none !important;
}
.dom_contextmenu{
margin-top:0px !important;
margin-left:0px !important;
padding:4px 0px !important;
background-color:#676767 !important;
max-width:130px !important;
border-radius:2px;
}
.dom_contextmenu li{
color: #E6E6E6 !important;
padding: 5px 9px !important;
font-family: 'Roboto', sans-serif !important;
}
.dom_contextmenu li.hover{
background-color:#5d5d5d !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: 15px !important;
}
#breakpoint-css{
width: 100%;
height: 340px;
text-align: left;
}
/* ---------------------------------------------------- */
/* YP CSS GRADIENT GENERATOR */
/* ---------------------------------------------------- */
.yp-gradient-section{
margin-top: 6px;
display:none;
width:100%;
}
#iris-gradient-color{
display:none;
}
.yp-gradient-section .iris-picker{
margin-top: 8px;
margin-left:-11px;
position: absolute;
z-index: 2147483647;
}
.yp-gradient-section .iris-picker:before,.yp-gradient-section .iris-picker:after{
display:none !important;
}
.yp-gradient-orientation{
width:100%;
height:50px;
margin-top:0px;
box-shadow: inset 1px 1px 10px rgba(0,0,0,0.4);
border-radius: 2px;
position:relative;
}
.yp-gradient-space{
height:8px;
}
.yp-gradient-orientation i{
width: 12px;
height: 12px;
border: 2px solid rgba(255,255,255, 0.9);
border-radius: 50%;
box-shadow: 1px 1px 1px rgba(0,0,0,.2);
display:inline-block;
margin-left:-6px;
margin-top:-6px;
top:50%;
left:50%;
cursor: move;
}
.yp-gradient-orientation b{
position: absolute;
font-size: 8px !important;
color: #FFF;
text-transform: uppercase;
display: block;
bottom: 8px;
right: 8px;
font-weight: 600;
pointer-events: none;
opacity: 0.8;
}
.gradient-editor{
background: #FFF;
padding: 10px 10px;
border-radius: 3px;
border: 1px solid #C8C8C8;
margin-bottom: 10px;
}
.yp-gradient-bar{
width:100%;
height:22px;
box-shadow: inset 1px 1px 10px rgba(0,0,0,0.2);
border-radius: 2px;
}
.yp-gradient-bar-background{
width:100%;
height:22px;
}
.yp-gradient-bar-background,.yp-gradient-pointer,.yp-color-background,.info-image-list img,.yp-theme-c,.cs-alpha-wrap{
background-image:url('../images/transparent.png') !important;
background-size:8px 8px;
}
.yp-gradient-pointer-area{
width:100%;
height:18px;
position:relative;
}
.yp-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;
}
.yp-gradient-pointer{
width: 12px;
height: 13px;
margin-left:-6px;
position: absolute;
border: 1px solid #6c6c6c;
top: 6px;
cursor: default;
}
.yp-gradient-pointer.disable{
display:none !important;
}
.yp-gradient-pointer i{
position: absolute;
width: 10px;
height: 11px;
background: #992323;
box-shadow: inset 0 0 0px 1px rgba(255,255,255,1);
}
.yp-gradient-pointer:after, .yp-gradient-pointer:before {
bottom: 12px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.yp-gradient-pointer:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #FFF;
border-width: 5px;
margin-left: -5px;
}
.yp-gradient-pointer:before {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000000;
border-width: 6px;
margin-left: -6px;
}
.yp-gradient-pointer.active:after{
border-bottom-color:#333;
}
#box-element-view{
display: table;
width: -o-calc(100% - 40px);
width: calc(100% - 40px);
text-align:center;
margin-left:20px;
margin-bottom:20px;
color:rgba(0, 0, 0, 0.6);
font-size: 11px;
border-radius: 4px;
overflow: hidden;
}
#box-element-view i, #box-element-view span{
font-style:normal;
}
.box-element-view-inner {
display: table-row-group;
}
.box-view-section{
display: table-row;
position:relative;
}
.model-view-size{
width:60%;
background-color:rgba(140, 182, 192, 1);
}
.model-view-padding{
background-color:rgba(195, 208, 139, 1);
}
.model-view-border{
background-color:rgba(253, 221, 155, 1);
}
.model-view-margin{
background-color:rgba(249, 204, 157, 1);
}
.model-view-size,.model-view-padding,.model-view-border,.model-view-margin{
display: table-cell;
padding: 3px 8px;
}
.yp-border-top-section,.yp-border-right-section,.yp-border-bottom-section,.yp-border-left-section{
display:none;
}
.box-view-section span{
margin-left: -5px;
width: 0px !important;
display: inline-block;
}
/* custom popup style */
.editor-style,.editor-style-ok,.editor-style-input{
background-color:#FFFFFF;
padding:26px 20px;
width:460px;
}
.editor-style fieldset,.editor-style-ok fieldset{
display:none;
}
.editor-style h2,.editor-style-ok h2,.editor-style-input h2{
margin: 0px 0px 10px;
font-size: 22px;
font-weight: 400;
color:#505050;
font-family: 'Roboto', sans-serif;
line-height: 1.5;
}
.editor-style-reset h2{
font-size: 20px !important;
margin-bottom: 8px;
}
.editor-style h2 strong,.editor-style-ok h2 strong,.editor-style-input h2 strong{
font-weight:500;
}
.editor-style button,.editor-style-ok button,.editor-style-input button{
margin:10px 4px 0 4px;
padding:9px 21px;
font-size:13px;
box-shadow: none !important;
}
.editor-style button.cancel:hover,.editor-style-ok button.cancel:hover,.editor-style-input button.cancel:hover{
background-color: #7E7676;
}
.editor-style button.cancel,.editor-style-ok button.cancel, .editor-style-input button.cancel{
background-color: #867E7E;
}
.editor-style button.confirm:hover{
background-color: #D15D45 !important;
}
.editor-style button.confirm{
background-color: #DD6B55 !important;
}
.editor-style-ok button.confirm,.editor-style-input button.confirm{
background-color:#5587DD !important;
}
.editor-style-ok button.confirm:hover,.editor-style-input button.confirm:hover{
background-color:#4F75B6 !important;
}
.editor-style p:not(:empty),.editor-style-ok p:not(:empty),.editor-style-input p:not(:empty){
display: block;
font-size: 14px;
line-height: 1.6;
margin-bottom: 10px;
color: #666;
}
.editor-style p,.editor-style-ok p,.editor-style-input p{
padding-top: 6px;
}
.editor-style .sa-icon,.editor-style-ok .sa-icon,.editor-style-input button.cancel .sa-icon{
margin: 0px auto 16px auto;
width: 50px;
height: 50px;
}
.editor-style .sa-icon,.editor-style-ok .sa-icon,.editor-style-input .sa-icon{
display:none !important;
}
/* input style */
.editor-style-input input{
width:80%;
display:block !important;
font-size: 14px;
background: #FFF;
color: #4e4e4e;
padding: 8px;
border: 1px solid #BBB;
font-style: normal;
border-radius:3px;
margin:0 auto;
}
.editor-style-input input:hover{
border-color:#777;
}
.editor-style-input input:focus{
border-color:#0080FF;
}
.focus-ready{
background-color:#ffffd1;
}
.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 */
@keyframes focusOption{
0% {
background-color:#e4e49e;
}
100% {
background-color:transparent;
}
}
/* Focus Animation Webkit */
@-webkit-keyframes focusOption{
0% {
background-color:#e4e49e;
}
100% {
background-color:transparent;
}
}
.yp-animate-test-playing .yp-option-group{
pointer-events:none !important;
cursor:default !important;
opacity:0.8 !important;
}
.anim-info-rule{
text-align: left;
display: inline-block;
vertical-align: middle;
}
.anim-info-value{
text-align: left;
padding-left: 2px;
display: inline-block;
vertical-align: middle;
}
.anim-info-border{
display: block;
border-bottom: 1px solid #CEEAFC;
margin-top: 3px;
margin-bottom: 3px;
}
.anim-bar .popover-content .anim-info-border:last-child{
display:none !important;
}
.anim-bar .popover{
box-shadow:none !important;
}
.anim-bar .popover-title{
background-color:#4f8aed !important;
font-size: 11px !important;
padding: 8px 8px 5px 8px !important;
color: rgba(255, 255, 255, 0.95);
}
.anim-bar .popover-content{
font-size:11px;
border-color: #a6bee6;
border-radius:0 0 3px 3px !important;
min-width:200px !important;
}
/* Resizable Conents, panels */
.ui-resizable-handle{
z-index:2147483647 !important;
position: absolute;
}
.yp-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;
}
.editor-panel .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;
}
.yp-animate-manager > .ui-resizable-handle{
left: 0px;
top: -6px;
height: 7px;
width: 100%;
cursor: n-resize;
}
.yp-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(.yp-element-list) .lists-option{
display:none !important;
}
/* show flex container only if element is flex based */
body:not(.yp-flex-container):not(.yp-flex-element) .flex-option{
display:none !important;
}
/* show grid only if element is grid */
body:not(.yp-grid-container):not(.yp-grid-element) .grid-option{
display:none !important;
}
.yp-flex-container .flex-option h3,.yp-flex-element .flex-option h3,.yp-element-list .lists-option h3,.yp-grid-container .grid-option h3,.yp-grid-element .grid-option h3{
background-color:#f0effc;
}
#flex-grow-group,#flex-shrink-group,#flex-basis-group,#align-self-group,#flex-direction-group,#flex-wrap-group,#justify-content-group,.flex-option #align-items-group,#align-content-group{
display:none;
}
.yp-flex-element #flex-grow-group,.yp-flex-element #flex-shrink-group,.yp-flex-element #flex-basis-group,.yp-flex-element #align-self-group{
display:block;
}
.yp-flex-container #flex-direction-group,.yp-flex-container #flex-wrap-group,.yp-flex-container #justify-content-group,.yp-flex-container #align-items-group,.yp-flex-container #align-content-group{
display:block;
}
#customizing-type-list{
color: #666666;
background: #FFF;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
border-radius: 4px;
z-index: 2147483647;
position: absolute;
left:0px;
top:auto;
width: 94%;
padding: 0px;
margin-top: 8px;
margin-left: 3%;
margin-right:3%;
display:none;
font-family:'Roboto', sans-serif;
}
#customizing-type-list ul{
list-style: none;
}
#customizing-type-list li{
position:relative;
padding-top: 14px;
padding-bottom: 14px;
padding-right:15px;
cursor: pointer;
border-bottom:1px solid #E1E8ED;
padding-left: 32px;
}
.yp-customizing-section #customizing-type-list li#yp-current-page{
padding: 10px 0;
display:block;
}
.yp-customizing-section #customizing-type-list li#yp-current-page h6{
text-align: center;
color: #4285f4;
}
#yp-current-page:hover,#yp-current-page.active {
background-color: #F4F4F4;
}
#customizing-type-list .reset-this-type,#customizing-type-list .manage-this-type{
background-position: center;
padding: 10px;
border-radius: 3px;
display: block;
font-size: 0;
width: 16px;
height: 16px;
background-size: 13px;
background-repeat: no-repeat;
position: absolute;
opacity: 0.6;
left: 6px;
line-height: 0;
}
.empty-customization .reset-this-type,.empty-customization .manage-this-type{
display:none !important;
}
#customizing-type-list li.type-disabled .reset-this-type, #customizing-type-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;
}
#customizing-type-list .manage-this-type:hover{
background-color:rgb(174, 174, 174);
}
#customizing-type-list .reset-this-type:hover{
background-color:rgb(174, 174, 174);
}
#customizing-type-list .manage-this-type{
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 60.2 60.2' version='1.1' viewBox='0 0 60.2 60.2' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.4 6.8v-6.2h-8.7v6.2c-3.4 1.6-5.7 5-5.7 9s2.3 7.5 5.7 9.1v33.5h8.7v-33.5c3.4-1.6 5.7-5.1 5.7-9.1s-2.3-7.4-5.7-9zm-4.3 13.4c-2.4 0-4.3-1.9-4.3-4.3s1.9-4.3 4.3-4.3 4.3 1.9 4.3 4.3c0 2.3-1.9 4.3-4.3 4.3z'/%3E%3Cpath d='m54.5 21.2v-20.6h-8.7v20.6c-3.4 1.6-5.7 5.1-5.7 9.1s2.3 7.5 5.7 9.1v19.1h8.7v-19.2c3.4-1.6 5.7-5.1 5.7-9.1s-2.3-7.4-5.7-9zm-4.4 13.4c-2.4 0-4.3-1.9-4.3-4.3s1.9-4.3 4.3-4.3 4.3 1.9 4.3 4.3c0.1 2.3-1.9 4.3-4.3 4.3z'/%3E%3Cpath d='m34.4 40.5v-39.9h-8.7v39.9c-3.4 1.6-5.7 5.1-5.7 9.1 0 5.6 4.5 10.1 10.1 10.1s10.1-4.5 10.1-10.1c0-4.1-2.4-7.5-5.8-9.1zm-4.3 13.4c-2.4 0-4.3-1.9-4.3-4.3s1.9-4.3 4.3-4.3 4.3 1.9 4.3 4.3c0 2.3-1.9 4.3-4.3 4.3z'/%3E%3C/svg%3E%0A");
margin-top:-1px;
}
#customizing-type-list .reset-this-type{
background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 512 512' version='1.0' viewBox='0 0 512 512' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:none;%7D%0A%3C/style%3E%3Cpath d='m296.7 103.9h-20.5c-13.4 0-24.3 10.9-24.3 24.3s10.9 24.3 24.3 24.3h20.5c62.1 0 112.6 50.5 112.6 112.6v0.8c0 62.1-50.5 112.6-112.6 112.6s-112.6-50.5-112.6-112.6v-31.9h48.6c10.4 0 16.1-13.5 9.2-22.1-21.4-26.9-45.3-50.3-68.4-75.3-7.6-8.3-20-8.3-27.6 0-23 25.1-47 48.4-68.4 75.3-6.8 8.6-1.2 22.1 9.2 22.1h48.7v31.9c0 88.9 72.3 161.2 161.2 161.2s161.2-72.3 161.2-161.2v-0.8c0.1-88.9-72.2-161.2-161.1-161.2z'/%3E%3Crect class='st0' x='.9' y='.2' width='511' height='511'/%3E%3C/svg%3E");
margin-top: 22px;
background-size: 18px;
background-position: 0px center;
}
#customizing-type-list li:last-child{
border-bottom-width:0px;
}
#customizing-type-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;
}
#customizing-type-list .active-customizing-list{
background-color:#f7f7f7;
}
#customizing-type-list li.active-customizing-list h6{
color:#5B7935;
}
#customizing-type-list p{
font-weight: 400;
line-height: 1.5;
color: #707070;
font-size: 12px;
clear:both;
width:80%;
}
#customizing-type-list:after, #customizing-type-list:before {
bottom: 100%;
left: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#customizing-type-list:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 8px;
margin-left: -8px;
}
#customizing-type-list:before {
border-color: rgba(187, 187, 187, 0);
border-bottom-color: #BBBBBB;
border-width: 9px;
margin-left: -9px;
}
.editor-panel .yp-customizing-section small.type-byte {
float: right;
color: #767676 !important;
font-size: 10px !important;
font-weight: 400 !important;
margin-top: 1px;
text-transform:capitalize;
text-align:right;
height:0;
}
#customizing-type-list li .current-type{
background-color: #5B7F2F;
width:6px;
height:6px;
border-radius: 100px;
display: none;
position: relative;
top: -1px;
margin-right: 6px;
}
#customizing-type-list li.active-customizing-list .current-type{
display:inline-block;
}
#customizing-type-list li h6 i{
display:none;
}
#customizing-type-list li:not(.type-disabled) *{
cursor:pointer !important;
}
#customizing-type-list .customizing-type-updated h6 i{
display: block;
font-size: 9px;
color: #767676;
padding-bottom:2px;
position:relative;
top: 3px;
font-style: normal;
}
.editor-panel .yp-customizing-section #customizing-mode span.dashicons{
position: relative;
top: -3px;
left: -5px;
opacity: 0.60;
font-size: 20px;
height: 16px;
width: 16px;
}
.editor-panel .yp-customizing-section #customizing-mode *{
pointer-events: none;
}
.editor-panel .yp-customizing-section #customizing-mode:hover > span.dashicons,.editor-panel .yp-customizing-section #customizing-mode.active > span.dashicons{
opacity:0.82;
}
.type-disabled{
cursor:default !important;
opacity:0.7 !important;
display:none !important;
}
.yp-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 */
@keyframes focusType{
0% {
background-color:rgba(243,243,153, 0.6);
}
100% {
background-color:transparent;
}
}
/* Focus Animation Webkit */
@-webkit-keyframes focusType{
0% {
background-color:rgba(243,243,153, 0.6);
}
100% {
background-color:transparent;
}
}
.left-menu-sublist{
position: fixed;
top: 9px;
left: 45px;
background-color: #EAEAEA;
width: 170px;
padding: 2px;
border: 1px solid #ABABAB;
-o-box-shadow: 0px 0px 2px 0px rgba(66, 133, 244, 0.2);
box-shadow: 0px 0px 2px 0px rgba(66, 133, 244, 0.2);
border-radius: 0px 0px 2px 2px;
}
.left-menu-sublist ul{
list-style-type:none;
padding:0px;
margin:0px;
}
.left-menu-sublist ul li{
color:#464646;
font-size:11px;
padding-top:4px;
padding-bottom:4px;
padding-left:38px;
cursor:pointer;
position:relative;
}
.left-menu-sublist ul li.active:before{
content: "";
background-color: #4d4c4c;
width: 5px;
height: 5px;
position: absolute;
top: 9px;
left: 7px;
}
.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{
content: "";
width: 12px;
height: 12px;
position: absolute;
top: 5px;
left: 23px;
background-image: url(../images/cursor.png);
background-repeat: no-repeat;
background-position: center;
display: inline-block;
background-size: 100%;
}
.inspector-sublist-default:after{
content: "";
width: 13px;
height: 14px;
position: absolute;
top: 4px;
left: 21px;
background-image: url(../images/target.png);
background-repeat: no-repeat;
background-position: center;
display: inline-block;
background-size: 100%;
}
.inspector-sublist-single{
margin-left:1px;
}
.inspector-sublist-single:after{
content: "";
width: 14px;
height: 14px;
position: absolute;
top: 4px;
left: 21px;
background-image: url(../images/sharp-selector-icon.png);
background-repeat: no-repeat;
background-position: center;
display: inline-block;
background-size: 100%;
}
.left-menu-sublist ul li:hover{
background-color:#B6D9FA;
}
.inspector-sublist{
display:none;
}
.search-box{
position: absolute;
top: 50px;
left: 46px;
height:80px;
background-color: #eaeaea;
z-index: 9999;
box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);
border-right:1px solid #9a9a9a;
border-top:1px solid #9a9a9a;
border-bottom:1px solid #b0b0b0;
font-size: 0;
display:none;
}
.search-box-topbar{
position: relative;
top: -1px;
background-color: #C9C9C9;
border-top: 1px solid #9a9a9a;
color: #505050;
padding: 6px 10px;
font-size: 11px;
line-height:14px;
font-weight: 600;
border-bottom: 1px solid #AEAEAE;
height:28px;
}
.search-close-link{
position: absolute;
top: -1px;
right: 0;
z-index: 999;
color: #505050;
cursor: pointer;
}
.search-live-result li.element-list:last-child {
border-bottom-width: 0px;
}
.search-input-area{
background-color: #ededed;
padding: 10px;
border-bottom: 1px solid #B9B9B9;
}
.search-close-link span{
width: 28px;
height: 27px;
text-align: center;
line-height: 28px;
font-size: 15px;
}
.search-box-inner {
height: calc(100% - 79px);
overflow-y: auto;
-webkit-touch-callout: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
font-size: 12px;
color: #585858;
padding: 0px;
position:relative;
}
.search-box #search{
min-width:229px;
border:1px solid #BBB;
padding:6px 10px;
font-size:12px;
color:#4e4e4e;
height:30px;
border-radius:3px;
background-color:#f9f9f9;
}
.search-box #search:hover{
border-color:#777;
}
.search-box #search:focus{
border-color:#0080FF;
}
.search-live-result{
margin:0;
padding:0;
font-size:0px;
}
.search-live-result li.element-list{
list-style: none;
position: relative;
background-color:transparent;
cursor:pointer;
height: 21px;
padding: 3px 10px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
border-radius: 50px;
margin-bottom:1px;
color:#626262;
}
.search-live-result li.element-list:hover{
background-color:#E9E9E9;
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.05) inset;
}
.search-live-result li.element-list.focus{
background-color: #D4E9FC;
z-index: 1;
position: relative;
border-bottom-color: transparent;
}
.search-live-result li.element-list i{
height: 29px;
display: inline-block;
position: absolute;
top: 0;
right:10px;
color: #858585;
line-height: 21px;
font-style: normal;
font-size: 11px;
}
.search-live-result{
margin: 1px 0 0;
padding: 6px 7px;
min-height: 0;
list-style-type: none;
background: #eff2f5;
background: linear-gradient(to bottom, #ffffff 0%,#eff2f5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eff2f5',GradientType=0 );
}
.search-live-result li.element-list span{
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.yp-gradient-list{
background-image: url(../images/wpspin_light.gif);
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
}
.yp-gradient-list,.yp-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;
}
.yp-unsplash-list{
height:289px;
}
@media (max-height:864px){
.yp-gradient-list,.yp-unsplash-list{
height:181px;
}
}
.yp-gradient-demo{
margin: 0px;
height: 30px;
cursor: pointer;
width: 100%;
position: relative;
font-size: 11px;
padding-left: 40px;
line-height: 30px;
border-bottom: 1px solid #F0F0F0;
background-color: #FFF;
}
.yp-gradient-demo:hover{
background-color:#EAF7FF;
}
.yp-gradient-demo.active{
background-color:#D9EEFE;
border-right: 3px solid #83CCF8;
}
.yp-gradient-demo span {
height: 30px;
width: 30px;
display: block;
position: absolute;
top: 0;
left: 0;
}
.yp-gradient-demo:last-child {
border-bottom-width: 0px;
}
.uigradient-api,.unsplash-api{
margin-top: 2px;
font-size: 9px;
color: #8d8b8b;
text-align: right;
}
.uigradient-api a,.unsplash-api a{
color:inherit;
}
#editor-element-tree{
display:none;
position: fixed;
bottom: 0;
left: 46px;
height: 28px;
width:-o-calc(100% - 46px);
width:calc(100% - 46px);
background-color: #ECECEC;
z-index: 100150;
border-top: 1px solid #AEAEAE;
box-shadow:0px 0px 2px 0px rgba(66, 133, 244, 0.3);
font-size: 11px;
line-height: 28px;
color: #5d5d5d;
transition:color 200ms;
}
/* parent tree option visible */
.yp-parent-tree-visible #editor-element-tree{
display:block;
}
#editor-element-tree:hover{
color:#454545;
}
#editor-element-tree ul{
display:flex;
margin-right:50px !important;
}
#editor-element-tree ul, #editor-element-tree li{
padding:0;
margin:0;
list-style:none;
}
#editor-element-tree li {
display:flex;
cursor: pointer;
position:relative;
min-width:0px;
background-repeat: no-repeat;
background-position: 15px 7px;
padding-left: 32px;
transition: flex 200ms ease 100ms;
}
#editor-element-tree li span{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display:inline-block;
padding-right: 12px;
}
#editor-element-tree li.active {
flex: 0 0 auto;
}
#editor-element-tree > span{
padding-left:16px;
}
#editor-element-tree li:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 6px solid #ECECEC;
position: absolute;
top: -1px;
left: 100%;
z-index: 2;
}
#editor-element-tree li:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 6px solid #999;
position: absolute;
top: -1px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
#editor-element-tree li.active,#editor-element-tree li.active:hover{
background-color:#FFFFFF;
color:#4d4d4d;
}
#editor-element-tree li.active:after,#editor-element-tree li.active:hover:after{
border-left-color:#FFFFFF;
}
#editor-element-tree li:hover{
background-color:#d6d6d6;
flex: 0 0 auto;
}
#editor-element-tree li:hover:after{
border-left-color:#d6d6d6;
}
body.yp-animate-manager-active #editor-element-tree{
display:none !important;
}
#visual-css-view{
position:fixed;
top:0;
right:0;
left:auto !important;
width:288px;
z-index: 2147483648;
height:100%;
background-color:#303030;
font-family: 'Roboto Mono', monospace !important;
font-size:12px;
box-shadow: -10px 0 20px 0 rgba(0,0,0,0.2);
border-left: 1px solid #222;
display:none !important;
}
body.visual-css-view-active #visual-css-view{
display:block !important;
}
.view-information{
text-align: center;
padding: 20px 50px;
margin: 0px;
color: #999999;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 18px;
}
#visual-css-view .ui-resizable-handle.ui-resizable-w{
left: -3px;
top: 0px;
width: 6px;
height: 100%;
cursor: e-resize;
}
#visual-css-content{ /* view top */
height:-o-calc(100% - 40px);
height:calc(100% - 40px);
overflow-x: hidden;
overflow-y: auto;
position:relative;
}
.css-view-top{
height:40px;
display:flex;
border-bottom: 1px solid #494949;
}
.css-view-top span.dashicons{
color: #FFF;
position: absolute;
left: 7px;
top: 10px;
opacity: 0.2;
pointer-events: none;
}
.view-scrolled .css-view-top{
box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.15);
}
#visual-rule-filter{
border-width: 0px;
background-color: rgba(0,0,0,0.1);
color: #A6A6A6;
padding-right: 11px;
line-height: 14px;
font-size: 13px;
width: 100%;
height:40px;
border-right:1px solid #494949;
border-bottom:1px solid #494949;
padding-left: 34px;
}
#visual-rule-filter:focus{
background-color: rgba(0,0,0,0.2);
}
#visual-rule-filter:hover,#visual-rule-filter:hover{
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1) inset;
}
.visual-manager-close{
cursor: pointer;
text-decoration: none;
background-size: 11px;
width: 54px;
height: 40px;
display: inline-block;
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;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
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(../images/no-found-view.png);
opacity: 0.4;
background-repeat: no-repeat;
margin-bottom: 10px;
background-size:26px 30px;
}
#view-no-item span.view-hand-icon{
background-image: url(../images/view-selector-icon.png);
background-size:32px 32px;
opacity: 0.26;
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:10px 0;
margin-top: 0;
padding-bottom:10px;
}
.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: 10px 10px 10px 30px;
margin-bottom: 10px;
position:relative;
background-color: #414141;
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: 11px !important;
top: 50% !important;
margin-top: -11px;
pointer-events: none;
display: inline-block !important;
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
line-height: 1 !important;
font-family: 'dashicons' !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: "\f140";
}
.selector-group.focus .selector-heading:before{
content: "\f142";
}
.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-family: 'Roboto', sans-serif;
font-weight:500;
color: #B0B0B0;
font-size:inherit;
padding:2px;
width:100%;
min-width:50px !important;
max-width:100% !important;
}
.selector-heading span{
width: 16px;
height: 16px;
position: absolute;
top: 11px;
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-group.focus {
background-color: #363636;
}
.selector-group.active .selector-heading{
border-top-color: rgba(0, 255, 183, 0.19);
border-bottom-color: rgba(0, 255, 183, 0.19);
background-color: rgba(0, 255, 183, 0.21);
}
.selector-group.active .selector-heading input{
color: rgba(255,255,255,0.8);
}
.selector-view{
margin-top:3px;
display:block;
}
.css-rule-group{
padding: 6px 10px;
}
.css-rule-view {
margin-bottom: 3px;
}
.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-family: 'Roboto Mono', monospace !important;
font-size: 12px;
font-weight: 600;
line-height:0;
padding:0px 0px 0px 4px;
max-width:100% !important;
}
.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;
}
.view-before-selector{
display:flex;
padding:8px 16px 6px 10px;
}
.css-rule-view{
padding-right:6px;
}
.view-before-selector .source-view{
color: #D48C8C;
pointer-events:none;
}
#visual-css-view[data-current-type="single"] .selector-group[data-view-type="single"] .source-view{
pointer-events:auto;
}
#visual-css-view[data-current-type="template"] .selector-group[data-view-type="template"] .source-view{
pointer-events:auto;
}
#visual-css-view[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(.yp-responsive-device-mode) .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;
top: 3px;
left: 2px;
height: 12px;
width: 12px;
border: 1px solid #747474;
border-radius: 3px;
}
.rule-checkbox:active{
border-color:#707070;
background-color:rgba(255,255,255,0.08);
}
.css-rule-label input:checked ~ .rule-checkbox:after {
display: block;
}
.css-rule-label .rule-checkbox:after {
content: "";
position: absolute;
display: none;
left: 3px;
top: 0px;
width: 2px;
height: 6px;
border: solid #78A441;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.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;
}
.mobile-icon{
display:none;
}
.property-responsive .mobile-icon{
background-image: url(../images/smart-phone.png);
background-size: 7px 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;
}
.editor-panel .property-responsive .yp-option-label span{
margin-right:24px;
}
.editor-panel #animation-name-group.property-responsive .yp-option-label span {
margin-left: 1px;
}
body:not(.wtfv) .yp-lite{
display:none !important;
}
.yp-pro-label{
display:none;
}
body.wtfv #font-family-group .yp-lite.yp-pro-label,
body.wtfv #color-group .yp-lite.yp-pro-label,
body.wtfv #background-image-group .yp-lite.yp-pro-label,
body.wtfv #background-color-group .yp-lite.yp-pro-label,
body.wtfv #width-group .yp-lite.yp-pro-label,
body.wtfv #height-group .yp-lite.yp-pro-label,
body.wtfv #animation-name-group .yp-lite.yp-pro-label{
display:inline-block !important;
}
.yp-lite.yp-pro-label{
font-style: normal;
background-color: #F73859;
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: middle;
opacity:0.9;
}
.yp-lite.yp-pro-label:hover{
text-indent: 0px;
background-color:#C62E46;
}
.smile-icon{
width: 18px;
height: 18px;
display: inline-block;
background-repeat: no-repeat;
background-size: 100%;
vertical-align: text-bottom;
margin-left: 6px;
}
.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);
}
.yp-message-box{
padding: 11px 11px 11px 46px;
cursor: pointer;
width: 265px;
font-size: 12px;
line-height: 17px;
font-weight: 400px;
font-family: 'Roboto', sans-serif;
color: rgba(255,255,255,0.80);
background-color: #494949;
position: fixed;
border-radius: 3px;
z-index: 2147483647;
box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
border-left: 3px solid #FFA500;
opacity:0;
transition:opacity 300ms;
}
.yp-message-box:hover{
opacity:1 !important;
}
.yp-message-box:before{
content: "\f534";
color:#FFA500;
display: inline-block;
width: 24px;
height: 24px;
font-size: 24px;
line-height: 1;
font-family: 'dashicons';
font-weight: 400;
position: absolute;
left: 11px;
top: 11px;
}
.yp-message-box b{
display: block;
font-weight: 500;
color: #DFD993;
padding-bottom: 3px;
font-size: 13px;
}
.ace_gutter-cell.ace_warning,.ace_gutter-cell.ace_info{
background-image:none !important;
}
body.hide-ace-tooltip .ace_tooltip{
display:none !important;
}
.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;
}
.yp-anim-el-column > i{
background-repeat: no-repeat;
width: 13px;
height: 13px;
display: inline-block;
margin-right: 4px;
position: relative;
top: 2px;
cursor:pointer;
}
.yp-anim-el-column > i, #editor-element-tree li,.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");
}
#editor-element-tree li.active, .yp-anim-el-column > i:hover,.yp-anim-el-column.anim-active-row > i,body.yp-content-selected #yp-current-element{
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;
}
.yp-limit-parent-view li:nth-child(n+7){
display:none;
}
.yp-limit-children-view li:nth-child(n+7){
display:none;
}
.context-menu-list.yp-contextmenu-parent {
max-height: 280px;
overflow-y: auto;
}
.context-menu-list.yp-contextmenu-children {
max-height: 280px;
overflow-y: auto;
}
.yp-limit-parent-view .show-more-parent-link, .yp-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;
}
.yp-limit-parent-view .show-more-parent-link:hover,.yp-limit-children-view .show-more-children-link:hover{
background-color:#D4E9FC;
}
@media (max-height:690px){
body:not(.yp-fixed-right-panel) .editor-panel .editor-panel-list > li > h3 {
padding-top: 11.5px !important;
padding-bottom: 11.5px !important;
}
}
body .context-menu-root:not(.dom_contextmenu):not(.yp-current-element-menu) .context-menu-list{
left:0px !important;
margin-left:168px !important;
}
body.yp-current-element-menu .context-menu-root:not(.dom_contextmenu) .context-menu-list{
left:0px !important;
margin-left:-168px !important;
}
body.yp-current-element-menu .context-menu-root:not(.dom_contextmenu) .context-menu-item{
font-family: "Roboto", sans-serif !important;
font-size:13px !important;
padding:6px 8em 6px 16px;
}
body.yp-current-element-menu > .context-menu-list:not(.dom_contextmenu):after, body.yp-current-element-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.yp-current-element-menu > .context-menu-list:not(.dom_contextmenu):after {
border-color: transparent;
border-bottom-color: #fff;
border-width: 7px;
margin-left: -7px;
}
body.yp-current-element-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;
}
.ace_editor {
font-family: 'Roboto Mono', monospace !important;
}
.editor-panel span.anim-player-icon{
position: absolute;
margin-left: 2px;
margin-top: -2px;
color:#666666 !important;
cursor:pointer !important;
}
.editor-panel span.anim-player-icon:hover{
color:#0080FF !important;
}
.editor-panel span.anim-player-icon.dashicons-controls-pause{
color:#da4747 !important;
}
.left-menu-sublist.interface-settings{
top:auto;
bottom:49px;
display:none;
background-color:#FFF;
border-color:#CCC;
margin-left: 1px;
border-left-width: 0px;
padding: 5px 0px;
width:auto;
}
.left-menu-sublist.interface-settings li{
font-size:12px;
line-height:18px;
color: #555555;
padding: 5px 100px 5px 16px;
white-space: nowrap;
position:relative;
cursor:auto;
}
.left-menu-sublist.interface-settings li:hover{
background-color:#f5f5f5;
}
.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;
margin-right:-2px;
}
.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: 1px #3c3e36 solid;
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.51);
line-height: 1.4;
background: #2e2f28;
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_completion-highlight{
color:#7f849c;
}
.ace-type-here{
position:relative;
}
.ace-type-here:before{
position:absolute;
content: "Type your code here.";
padding-left:34px;
font-style: italic;
color: #5F5A60;
margin-left:6px;
}
.ace-type-here.ace-type-here-in-responsive:before{
padding-left:68px;
}
.yp-css-editor-disable .yp-contextmenu-type-css, .yp-css-editor-disable .show-css-menu{
display:none !important;
}
.yp-css-editor-disable .source-view{
pointer-events:none !important;
}
body .editor-panel li.empty-property{
display:none !important;
}
.yp-unsplash-section{
margin-top: 6px;
display:none;
width:100%;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 6px 0px;
}
.yp-unsplash-list:empty{
background-image: url(../images/wpspin_light.gif);
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
}
.yp-unsplash-list > span{
margin: 0;
padding: 0;
width: 50%;
height: 96px;
background-size: cover;
border: 1px solid #FFF;
cursor:pointer;
position:relative;
overflow:hidden;
}
.yp-unsplash-list > span.active{
box-shadow: inset 0 0 0 2px #0080FF !important;
}
.yp-unsplash-list > span:nth-child(odd) {
border-left-width: 0px;
}
.yp-unsplash-list > span:nth-child(even) {
border-right-width: 0px;
}
.yp-unsplash-list > span:nth-child(1) {
border-top-width: 0px;
}
.yp-unsplash-list > span:nth-child(2) {
border-top-width: 0px;
}
.yp-unsplash-list > span:nth-last-child(-n+2) {
border-bottom-width:2px;
}
.yp-unsplash-list > span.active:not(.unsplash-img-loading) i{
width: 56px;
height: 20px;
position: absolute;
top: 50%;
left: 50%;
display: block;
background-color: rgba(0, 0, 0, 0.8);
font-size: 11px !important;
color: #dbdbdb;
font-family: 'Roboto', sans-serif;
text-align: center;
line-height: 21px;
font-weight: 500;
margin-top: -10px;
margin-left: -28px;
border-radius: 3px;
box-shadow: 0 0px 50px 50px rgba(0,0,0,0.2);
font-style:normal;
}
.yp-unsplash-list > span.active:not(.unsplash-img-loading)[data-local] i{
display:none !important;
}
#unsplash-search,#unsplash-search:hover,#unsplash-search:focus{
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: rgba(0, 0, 0, 0.8);
font-size: 11px !important;
color: #dbdbdb;
font-family: 'Roboto', sans-serif;
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);
}
.yp-input-wrapper{
position:relative;
}
.yp-upload-btn{
background-image: url(../images/upload.svg);
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;
}
.yp-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;
}
.yp-input-wrapper:not(.empty-input) .yp-clear-btn{
opacity:1;
pointer-events:auto;
}
.reset-enable .yp-input-wrapper .yp-clear-btn{
display:none !important;
}
.editor-panel .yp-input-wrapper input{
padding-right:31px !important;
}
.editor-panel .yp-input-wrapper:not(.empty-input) input{
padding-right:50px !important;
}
.editor-panel .reset-enable .yp-input-wrapper input{
padding-right:31px !important;
}
.yp-clear-btn:hover{
color:#D33939;
}
.yp-upload-btn:hover,.yp-upload-btn.active{
opacity:#666;
}
.yp-upload-btn.active{
box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.1) inset;
background-color:#D3EDFF;
}
.yp-select-option textarea{
display:none !important;
}
.yp-unsplash-list.no-result{
position:relative;
}
.yp-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;
font-family: 'Roboto', sans-serif;
}
body.yp-yellow-pencil-demo-mode .yp-unsplash-list span > i{
display:none !important;
}
.yp-contextmenu-reset-single.yp-disable-contextmenu,.yp-contextmenu-reset-template.yp-disable-contextmenu,.yp-contextmenu-reset-global.yp-disable-contextmenu{
display:none !important;
}
.yp-contextmenu-small{
position: absolute;
top: auto;
right: 10px;
background-color: #EEEEEE;
padding: 0px 4px;
font-style: normal;
border-radius: 3px;
color: #666;
font-size: 11px;
}
.yp-active-contextmenu .yp-contextmenu-small{
background-color:#0098ff !important;
color:#FFF !important;
}
.context-menu-item.hover .yp-contextmenu-small{
background-color: #DDDDDD;
}
.yp-disable-contextmenu .yp-contextmenu-small{
display:none !important;
}
.ace_content .ace_line_group{
pointer-events:auto;
}
/* Grid builder disable first */
.grid-builder-area .this-grid.last-grid .delete-grid {
background-color: #989898;
pointer-events:none;
}
.this-grid p, .grid-builder-add-new,.grid-format{
font-size:12px;
}
.grid-builder-input{
display:none;
}
.grid-builder-area{
background: #FFF;
padding: 10px 0;
border: 1px solid #BBBBBB;
border-radius: 3px;
}
.grid-builder-area .this-grid{
padding-top:4px;
padding-bottom:4px;
padding-left:10px;
padding-right:10px;
position:relative;
transition:background-color 200ms;
}
.grid-builder-area .this-grid:hover{
background-color:#DDEDFD;
}
.grid-builder-area .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;
}
.grid-builder-area .this-grid-input:hover,.grid-builder-area .this-grid-input:focus,.grid-builder-area .this-grid-input:active{
z-index:5;
}
.grid-builder-area .grid-format{
font-size: 12px;
background: #FFFFFF;
display: inline-block;
width: 51px;
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;
}
.grid-builder-area .grid-format:hover{
z-index: 5;
}
.grid-format-div{
display: inline-block;
height: 30px;
position: relative;
vertical-align: top;
}
.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;
}
.grid-builder-area .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: 24px;
height: 30px;
background: #808080;
opacity:0.86;
}
.grid-builder-area .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: 0px 1px 15px rgba(0, 0, 0, 0.2);
}
#property-responsive-menu > b{
display: block;
font-weight: 600;
color: #DFD993;
padding-bottom: 3px;
font-size: 12px;
padding-left: 9px;
padding-right: 9px;
margin-bottom: 2px;
}
.property-responsive-item{
padding: 5px 9px;
cursor:pointer;
text-transform: capitalize;
position:relative;
}
.property-responsive-item:active{
background-color:rgba(255,255,255,0.2) !important;
}
.property-responsive-item: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;
}
.property-responsive-item span:not(.dashicons-no-alt){
font-size: 12px;
width: 12px;
height: 12px;
position: relative;
top: 2px;
margin-right: 4px;
}
.property-responsive-item .dashicons-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;
}
.property-responsive-item .dashicons-no-alt:hover{
background-color:rgba(0,0,0,0.2);
color:rgb(255, 129, 129);
}
.property-responsive-open .editor-panel .fake-layer-responsive {
display: block;
content: " ";
background: rgba(0, 0, 0, 0.2);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2147483647;
}
/* 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;
}
.yp-option-group:hover #include-webfont-label{
opacity:1;
}
.yp-option-group.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;
}
.breakpoint-bar .edited:not(.small-breakpoint) span.breakpoint-menu{
position: absolute;
top: 5px;
width: 12px;
height: 10px;
content: " ";
color: rgba(0,0,0,0.60);
font-size: 16px;
line-height: 10px;
}
.breakpoint-bar .max-width.edited{
padding-right:23px;
}
.breakpoint-bar .max-width.edited:not(.small-breakpoint) span.breakpoint-menu{
right: 8px;
}
.breakpoint-bar .min-width.edited{
padding-left:23px;
}
.breakpoint-bar .min-width.edited:not(.small-breakpoint) span.breakpoint-menu{
left:4px;
}
.breakpoint-bar .edited.small-breakpoint span.breakpoint-menu{
display:none !important;
}
#yp-customizing-type-frame{
background-image: url(../images/wpspin_light.gif);
background-repeat:no-repeat;
background-position:center;
background-color: rgba(197, 185, 192, 0.6);
background-size: 24px;
}
.option-group-class .yp-option-group .yp-radio{
overflow:hidden;
}
#font-weight-group{
width:60%;
}
#border-style-group .yp-radio > label,#border-top-style-group .yp-radio > label,#border-right-style-group .yp-radio > label,#border-bottom-style-group .yp-radio > label,#border-left-style-group .yp-radio > label{
position:relative;
min-height:32px;
}
#border-style-none .dashicons,#border-top-style-none .dashicons,#border-right-style-none .dashicons,#border-bottom-style-none .dashicons,#border-left-style-none .dashicons{
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;
}
.yp-slider-option .yp-option-label {
margin-bottom: 0px !important;
top: 4px;
width:calc(100% - 98px);
}
.yp-slider-option .yp-after{
position:relative;
top:-3px;
}
.yp-slider-option .yp-slider-div {
top:9px;
}
/* SPACING */
.option-group-class{
display: flex;
justify-content:space-between;
}
.editor-panel .yp-option-group, .option-group-class{
padding-bottom: 14px;
padding-top: 11px;
padding-left: 16px;
padding-right: 16px;
}
.option-group-less{
padding-bottom: 13px;
padding-top: 9px;
}
.yp-advanced-link{
margin-top: 11px !important;
margin-bottom: 14px !important;
}
.yp-add-animation-link{
margin-top:14px !important;
}
.yp-slider-option {
padding-top: 8px !important;
}
/* more padding for margin pading radius and border sliders */
.margin-option .yp-slider-option,.padding-option .yp-slider-option,.border-radius-option .yp-slider-option, .border-option .yp-slider-option {
padding-top: 12px !important;
padding-bottom: 18px !important;
}
/* SPACING END */
.option-group-class .yp-option-group{
border-bottom:none;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
width:47%;
}
.margin-option .yp-slider-option .yp-option-label,.padding-option .yp-slider-option .yp-option-label,.border-radius-option .yp-slider-option .yp-option-label {
margin-bottom: 0px !important;
top: 2px;
width:calc(100% - 98px);
}
.margin-option .yp-slider-option .yp-after,.padding-option .yp-slider-option .yp-after,.border-radius-option .yp-slider-option .yp-after{
position:relative;
top:-3px;
}
.margin-option .yp-slider-option .yp-slider-div,.padding-option .yp-slider-option .yp-slider-div,.border-radius-option .yp-slider-option .yp-slider-div {
opacity: 1;
top:10px;
}
.yp-this-content > div:not(.yp-border-all-section):not(.yp-border-top-section):not(.yp-border-right-section):not(.yp-border-bottom-section):not(.yp-border-left-section):hover{
background-color:rgba(0,0,0,0.02);
}
.yp-this-content > .yp-border-all-section > div:hover,.yp-this-content > .yp-border-top-section > div:hover,.yp-this-content > .yp-border-right-section > div:hover,.yp-this-content > .yp-border-bottom-section > div:hover,.yp-this-content > .yp-border-left-section > div:hover{
background-color:rgba(0,0,0,0.02);
}
.yp-this-content > .yp-advanced-option > div:hover{
background-color:rgba(0,0,0,0.02);
}
.yp-option-group.reset-enable:not(#animation-play-group) .yp-option-label > span.yp-disable-btn {
background: rgba(104, 104, 104, 0.13);
padding: 2px 4px;
border-radius: 3px;
cursor:default;
color: rgb(17, 115, 181) !important;
}
.yp-option-group.reset-enable:not(#animation-play-group) .yp-option-label > span.yp-disable-btn:hover {
background: rgba(104, 104, 104, 0.10);
color: rgb(11, 133, 215) !important;
}
.yp-option-group.reset-enable:not(#animation-play-group) .yp-option-label > span.yp-disable-btn::after {
display: inline-block !important;
width: 13px !important;
height: 13px !important;
font-size: 13px !important;
line-height: 1 !important;
font-family: 'dashicons' !important;
text-decoration: inherit !important;
font-weight: 400 !important;
font-style: normal !important;
vertical-align: top !important;
text-align: center !important;
content: "\f335";
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 */
#flex-direction-group .yp-option-container,
#align-self-group .yp-option-container,
#box-sizing-group .yp-option-container,
#box-shadow-inset-group .yp-option-container,
#direction-group .yp-option-container,
#visibility-group .yp-option-container,
#display-group .yp-option-container,
#text-shadow-group .yp-option-container,
#background-repeat-group .yp-option-container,
#background-clip-group .yp-option-container,
#background-size-group > .yp-option-container,
#word-wrap-group .yp-option-container,
#transition-timing-function-group .yp-option-container,
#background-color-group .yp-option-container,
#box-shadow-color-group .yp-option-container
{
display: flex;
justify-content: space-between;
align-items: center;
}
#flex-direction-group .yp-option-container .yp-option-label,
#align-self-group .yp-option-container .yp-option-label,
#box-sizing-group .yp-option-container .yp-option-label,
#box-shadow-inset-group .yp-option-container .yp-option-label,
#direction-group .yp-option-container .yp-option-label,
#visibility-group .yp-option-container .yp-option-label,
#text-shadow-group .yp-option-container .yp-option-label,
#display-group .yp-option-container .yp-option-label,
#background-repeat-group .yp-option-container .yp-option-label,
#background-clip-group .yp-option-container .yp-option-label,
#background-size-group > .yp-option-container .yp-option-label,
#word-wrap-group .yp-option-container .yp-option-label,
#transition-timing-function-group .yp-option-container .yp-option-label,
#background-color-group .yp-option-container .yp-option-label,
#box-shadow-color-group .yp-option-container .yp-option-label
{
margin-bottom: 0px !important;
width: 50%;
}
#flex-direction-group .yp-option-container > div,
#align-self-group .yp-option-container > div,
#box-sizing-group .yp-option-container > div,
#box-shadow-inset-group .yp-option-container > div,
#direction-group .yp-option-container > div,
#visibility-group .yp-option-container > div,
#text-shadow-group .yp-option-container > div,
#display-group .yp-option-container > div,
#background-repeat-group .yp-option-container > div,
#background-clip-group .yp-option-container > div,
#background-size-group > .yp-option-container > div,
#word-wrap-group .yp-option-container > div,
#transition-timing-function-group .yp-option-container > div,
#background-color-group .yp-option-container > div,
#box-shadow-color-group .yp-option-container > 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;
transition: background-color .2s linear;
-webkit-transition: background-color .2s linear;
}
.editor-panel .ps__thumb-y{
right: 2px !important;
border-radius:6px !important;
background-color:#929292;
}
.editor-panel .ps__rail-y.ps--clicking > .ps__thumb-y{
background-color:#777777;
}
#visual-css-view .ps__thumb-y {
background-color:#636363;
}
#visual-css-view .ps__rail-y.ps--clicking > .ps__thumb-y{
background-color:#737373;
}
@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 */
#box-sizing-group.reset-enable.property-responsive .yp-option-container .yp-option-label{
width:70%;
}
#word-wrap-group.reset-enable.property-responsive .yp-option-container .yp-option-label{
width:70%;
}
#flex-direction-group.reset-enable.property-responsive .yp-option-container .yp-option-label{
width:70%;
}
#align-self-group.reset-enable.property-responsive .yp-option-container .yp-option-label{
width:70%;
}
body.wtfv #background-color-group.reset-enable.property-responsive .yp-option-container .yp-option-label{
width:70%;
}
body.wtfv #color-group.reset-enable.property-responsive{
width:60%;
}
#text-shadow-group.property-responsive .yp-option-container .yp-option-label{
width:76%;
}
#justify-items-group{
width:49%;
}
.grid-option #align-items-group{
width:45%;
}
#list-style-type-group .ui-autocomplete{
max-height: 158px;
}