:root {
    --editor-menu-height: 51px;
    --element-color-title: 0, 102, 204;
    --element-color-subtitle: 102, 51, 153;
    --element-color-body: 255, 0, 51;
    --element-color-media: 0, 102, 51;
    --element-color-media-sharp: 49, 172, 110;
    --element-color-icon: 255, 153, 0;
    --element-color-social: 160, 108, 53;
    --element-color-button: 45, 101, 158;
    --element-color-link: 146, 87, 158;
    --element-color-divider: 0, 182, 191;
    --element-color-menu: 43, 135, 232;
    --element-color-script: 43, 135, 232;
    --element-color-rating: 195, 118, 117;
    --element-color-form: 172, 118, 37;
    --element-color-product: 13, 57, 25;
    --element-color-button1: 45, 101, 158;
    --element-color-button2: 68, 129, 191;
    --element-color-button3: 87, 134, 181;

    --ui-helper-color:#0084D9;
    --item-color: #2b87e8;
    --section-color: #2b87e8;
    --section-dynamic-color: #636363;
    --dynamic-color: #2b87e8 ;
    --dynamic-link-color: #5A24CC ;

    --mouse-x: 200px;
    --mouse-y: 200px;
}

article {

}

section {

}


.fr-toolbar {
    z-index: 999999999;
}

.fr-popup {
    z-index: 999999999 !important;
}

[data-elementtype=IMAGE] {
    outline: 2px solid transparent;
    outline-offset: 4px;
    transition: outline 0.2s ease-out;
}

[data-elementtype=IMAGE]:hover, [data-elementtype=IMAGE].element-focus,
[data-elementtype=VIDEO]:hover, [data-elementtype=VIDEO].element-focus,
[data-elementtype=COLOR]:hover, [data-elementtype=COLOR].element-focus,
[data-elementtype=MAP]:hover, [data-elementtype=MAP].element-focus
{
    outline: 2px solid rgba(var(--element-color-media), 0.4);

}

[data-elementtype=TITLE] {
    outline: 2px solid transparent;
    outline-offset: 4px;
    transition: outline 0.2s ease-out;
}

[data-elementtype=TITLE]:hover, [data-elementtype=TITLE].element-focus {
    outline: 2px solid rgba(var(--element-color-title), 0.4);
}

[data-elementtype=SUBTITLE] {
    outline: 2px solid transparent;
    outline-offset: 4px;
    transition: outline 0.2s ease-out;
}

[data-elementtype=SUBTITLE]:hover, [data-elementtype=SUBTITLE].element-focus {
    outline: 2px solid rgba(var(--element-color-subtitle), 0.4);

}

[data-elementtype=BODY] {
    outline: 2px solid transparent;
    outline-offset: 4px;
    transition: outline 0.2s ease-out;
}

[data-elementtype=BODY]:hover, [data-elementtype=BODY].element-focus {
    outline: 2px solid rgba(var(--element-color-body), 0.4);
}

[data-elementtype=BUTTON]:hover, [data-elementtype=BUTTON].element-focus {
    outline: 2px solid rgba(var(--element-color-button), 0.4);
    outline-offset: 4px;
}

[data-elementtype=BUTTON2]:hover, [data-elementtype=BUTTON2].element-focus {
    outline: 2px solid rgba(var(--element-color-button2), 0.4);
    outline-offset: 4px;
}

[data-elementtype=BUTTON3]:hover, [data-elementtype=BUTTON3].element-focus {
    outline: 2px solid rgba(var(--element-color-button3), 0.4);
    outline-offset: 4px;
}

[data-elementtype=ICON] {
    outline: 2px solid transparent;
    outline-offset: 4px;
    transition: outline 0.2s ease-out;
}

[data-elementtype=ICON]:hover, [data-elementtype=ICON].element-focus {
    outline: 2px solid rgba(var(--element-color-icon), 0.4);

}

[data-drawer-focus="DYNAMIC_LINK"] article.section-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    bottom: 0;
    box-shadow: inset 0 0 0 1px var(--dynamic-link-color);
}

article .social {
    outline: 2px solid transparent;
    outline-offset: 4px;
    transition: outline 0.2s ease-out;
}

article.section-item .social a:first-child div[data-elementtype="SOCIAL"]{
    margin-left:0 !important;
}

article.section-item .social a:last-child div[data-elementtype="SOCIAL"]{
    margin-right:0 !important;
}

article .social:hover, article .social.element-focus {
    outline: 2px solid rgba(var(--element-color-social), 0.4);
}

[data-elementtype=DIVIDER]:hover, [data-elementtype=DIVIDER].element-focus {
    outline: 2px solid rgba(var(--element-color-divider), 0.4);
}

[data-elementtype=RATING]:hover, [data-elementtype=RATING].element-focus {
    outline: 2px solid rgba(var(--element-color-rating), 0.4);
}

div[data-elementtype="RATING"]:hover::before {
    line-height: 1;
    letter-spacing: 0;
    content: "Rating";
    background-color: rgb(var(--element-color-rating));
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: fixed;
    left: var(--mouse-x)!important;
    top: var(--mouse-y)!important;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 9999;
    height: 10px;
    transform: none!important;
    min-width: 50px;
    width: 50px;
    text-align: center!important;
}

div.social:hover::before {
    line-height: 1;
    letter-spacing: 0;
    content: "Social";
    background-color: rgb(var(--element-color-rating));
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: fixed;
    left: var(--mouse-x)!important;
    top: var(--mouse-y)!important;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 9999;
    height: 10px;
    transform: none!important;
    min-width: 50px;
    width: 50px;
    text-align: center!important;
}

@media only screen and (max-width: 800px) {
    .saveButton {
        display: none !important;
    }

    .previewButton {
        width: 110px !important;
    }

    .publishButton {
        width: 110px !important;
    }
}

.website article {
    outline: solid 1px rgba(121, 121, 121, 0);
    transition: outline 0.3s ease-out;
}



.website article:hover {
   outline: solid 1px rgba(121, 121, 121, 0.32)!important;
}

.website article:not(.section-header)::after {
    opacity: 0;
    content: "Item";
    background-color: rgba(121, 121, 121, 0.8);
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: absolute;
    top: 0px;
    left: -1px;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 999;
    transition: opacity 0.3s ease-out;
}

.website section[data-arranger="carousel"] article:not(.section-header):hover::after ,
.website section[data-arranger="flex"] article:not(.section-header):hover::after {
    opacity: 1;
    content: "Item";
    background-color: rgba(121, 121, 121, 0.8);
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: absolute;
    top: 0px;
    left: 52px;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 999;
    transition: opacity 0.3s ease-out;
}

article.section-header::after {
    opacity: 0;
    content: "Header";
    background-color: rgba(121, 121, 121, 0.8);
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: absolute;
    top: 0px;
    left: -1px;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 999;
    transition: opacity 0.3s ease-out;
}

.website article:not(.section-header):hover::after {
    opacity: 1;
    content: "Item";
    background-color: rgba(121, 121, 121, 0.8);
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: absolute;
    top: 0px;
    left: -1px;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 999;
    transition: opacity 0.3s ease-out;
}

article.section-header:hover::after {
    opacity: 1;
    content: "Header";
    background-color: rgba(121, 121, 121, 0.8);
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: absolute;
    top: 0px;
    left: -1px;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 999;
    transition: opacity 0.3s ease-out;

}

section:hover {
    outline: solid 0px gray;
    outline-offset: -2px;
}

.website section:hover::after {
    content: "Section";
    background-color: gray;
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: absolute;
    top: 0px;
    left: -2px;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 99;
}


section[data-isreferenced="true"][data-hascustomcss="true"]:hover::after,
section[data-hascustomcss="true"]:hover::after {
    content: "+ CSS";
    width: 35px;
    background-color: orange;
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: absolute;
    top: 0px;
    left: -2px;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 99;
}

section[data-isreferenced="true"]:hover::after {
    content: "Instance";
    background-color: #358fff;
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: absolute;
    top: 0px;
    left: -2px;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 99;

}

.pic-side:hover {
    outline: solid 0px rgb(var(--element-color-media));
    outline-offset: 0px;
}

.pic-side::after {
    opacity: 0;
    content: "Media";
    background-color: rgb(var(--element-color-media));
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: fixed;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 99;
    transition: opacity 0.5s ease-out;
    transition-delay: 0.2s;
}

.pic-side:hover::after {
    opacity: 1;
    content: "Media";
    background-color: rgb(var(--element-color-media));
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: fixed;
    left: var(--mouse-x)!important;
    top: var(--mouse-y)!important;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 999;
    transition: opacity 0.5s ease-out;
    transition-delay: 0.2s;
    transform: none!important;
    min-width: 50px;
    width: 50px;
    text-align: center!important;
}


h2[data-elementtype="TITLE"]:hover {
    outline: solid 1px rgb(var(--element-color-title));
    position: relative;
    outline-offset: 2px!important;
}

h1[data-elementtype="TITLE"]:hover::before,
h3[data-elementtype="TITLE"]:hover::before,
h2[data-elementtype="TITLE"]:hover::before {
    line-height: 1;
    letter-spacing: 0;
    content: "Title";
    background-color: rgb(var(--element-color-title));
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: fixed;
    min-width: 50px;
    width: 50px;
    left: var(--mouse-x)!important;
    top: var(--mouse-y)!important;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 9999;
    height: 10px;
    transform: none;
    min-width: 50px;
    width: 50px;
    text-align: center!important;
}

div[data-elementtype="BODY"]:hover {
    outline: solid 1px rgb(var(--element-color-body));
    position: relative;
    outline-offset: 2px!important;
}

div[data-elementtype="BODY"]:hover::before {
    line-height: 1;
    letter-spacing: 0;
    content: "Body";
    background-color: rgb(var(--element-color-body));
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: fixed;
    left: var(--mouse-x)!important;
    top: var(--mouse-y)!important;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 9999;
    height: 10px;
    transform: none;
    min-width: 50px;
    width: 50px;
    text-align: center!important;
}

h3[data-elementtype="SUBTITLE"]:hover {
    outline: solid 1px rgb(var(--element-color-subtitle));
    position: relative;
    outline-offset: 2px!important;
}

h3[data-elementtype="SUBTITLE"]:hover::before {
    line-height: 1;
    letter-spacing: 0;
    content: "Subtitle";
    background-color: rgb(var(--element-color-subtitle));
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: fixed;
    left: var(--mouse-x);
    top: var(--mouse-y);
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 9999;
    height: 10px;
    transform: none;
    min-width: 50px;
    width: 50px;
    text-align: center!important;
}


div[data-elementtype="BUTTON"]:hover {
    outline: solid 1px rgb(var(--element-color-button));
    position: relative;
}

div[data-elementtype="BUTTON"]:hover::before,
div[data-elementtype="BUTTON2"]:hover::before,
div[data-elementtype="BUTTON3"]:hover::before {
    line-height: 1;
    letter-spacing: 0;
    content: "Button";
    background-color: rgb(var(--element-color-button));
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: fixed;
    left: var(--mouse-x)!important;
    top: var(--mouse-y)!important;
    font-size: 10px;
    color: white;
    font-family: arial;
    z-index: 9999;
    min-width: 50px;
    width: 50px;
    height: 10px;
    transform: none;
    text-align: center!important;
    text-shadow: none;
    box-shadow: none;
}

div[data-elementtype="BUTTON2"]:hover::before {
    content: "Button 2";
}

div[data-elementtype="BUTTON3"]:hover::before {
    content: "Button 3";
}

.manage-items-native-thumbnail {
    border: 0;
    flex: 1;
    object-fit: cover;
}

@keyframes helperShadowTop {
    from { box-shadow: 0 -1px 0 0 var(--ui-helper-color); }
    to { box-shadow: none; }
}

@keyframes helperShadowRight {
    from { box-shadow: 1px 0 0 0  var(--ui-helper-color); }
    to { box-shadow: none; }
}

@keyframes helperShadowBottom {
    from { box-shadow: 0 1px 0 0  var(--ui-helper-color); }
    to { box-shadow: none; }
}

@keyframes helperShadowLeft {
    from { box-shadow: -1px 0 0 0  var(--ui-helper-color); }
    to { box-shadow: none; }
}

@keyframes helperShadowTopAndBottom {
    from { box-shadow: 0 -1px 0 0  var(--ui-helper-color), 0 1px 0 0  var(--ui-helper-color); }
    to { box-shadow: none; }
}

@keyframes helperBgColor {
    from {background-color:  var(--ui-helper-color);}
    to { background-color: transparent; }
}


/*horizontal and text ui helper animations*/

.website .section[data-is-selected="true"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    bottom: 0;
    box-shadow: inset 0 0 0 2px var(--ui-helper-color);
}

.website .section[data-is-selected="false"]:after,
.website .top_menu[data-is-selected-section="true"]:after,
.website .bottom_footer[data-is-selected-section="true"]:after{
   content: '';
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: 999;
    background-color: black;
    opacity: 0.5;
}

.website .section-header[data-ui-helper="text-content-width-header"] .text-side,
.website .section-item[data-ui-helper="text-content-width"] .text-side {
    box-shadow: -1px 0 0 0  var(--ui-helper-color), 1px 0 0 0  var(--ui-helper-color);
}

.website .section-item[data-ui-helper="text-align-left"] .text-side,
.website .section-header[data-ui-helper="text-align-left-header"] .text-side,
.website .section-item[data-ui-helper="text-horizontal-left"] .text-side,
.website .section-header[data-ui-helper="text-horizontal-left-header"] .text-side{
    animation: 3s helperShadowLeft;
}

.website .section-item[data-ui-helper="text-horizontal-center"] .text-side:after,
.website .section-header[data-ui-helper="text-horizontal-center-header"] .text-side:after,
.website .section-item[data-ui-helper="text-align-center"] .text-side:after,
.website .section-header[data-ui-helper="text-align-center-header"] .text-side:after{
    width: 1px;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    animation: 3s helperBgColor;
}

.website .section-item[data-ui-helper="text-horizontal-right"] .text-side,
.website .section-header[data-ui-helper="text-horizontal-right-header"] .text-side,
.website .section-item[data-ui-helper="text-align-right"] .text-side,
.website .section-header[data-ui-helper="text-align-right-header"] .text-side {
    animation: 3s helperShadowRight;
}

/*Vertical text ui helper animations*/

.website .section-item[data-ui-helper="text-vertical-bottom"] .text-side,
.website .section-header[data-ui-helper="text-vertical-bottom-header"] .text-side {
    animation: 3s helperShadowBottom;
}

.website .section-item[data-ui-helper="text-vertical-center"] .text-side:after,
.website .section-header[data-ui-helper="text-vertical-center-header"] .text-side:after{
    height: 1px;
    width: 100%;
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: 3s helperBgColor;
}

.website .section-item[data-ui-helper="text-vertical-top"] .text-side,
.website .section-header[data-ui-helper="text-vertical-top-header"] .text-side {
    animation: 3s helperShadowTop;
}
.website .section-item[data-ui-helper="text-vertical-stretch"] .text-side ,
.website .section-header[data-ui-helper="text-vertical-stretch-header"] .text-side {
    animation: 3s helperShadowTopAndBottom;
}