.mcfw-widget-design-wrapper {
    display: flex;
    flex-flow: row;
    width: 100%;
    border: 2px solid orange;
    position: relative;
}

.mcfw-widget-design-wrapper .mcfw-wdw-left {
    position: absolute;
    left: 0px;
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    z-index: 1000;
}

.mcfw-widget-design-wrapper .mcfw-wdw-right {
    /*position: absolute;*/
    right: 0px;
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    z-index: 1000;
}

.mcfw-widget-design-wrapper .right-info-panel,
.mcfw-widget-design-wrapper .left-info-panel,
.mcfw-widget-design-wrapper .mcfw-wdw-right > .alignment-panel,
.mcfw-widget-design-wrapper .mcfw-wdw-right > .size-panel,
.mcfw-widget-design-wrapper .mcfw-wdw-right > .font-panel,
.mcfw-widget-design-wrapper .mcfw-wdw-right > .padding-panel,
.mcfw-widget-design-wrapper .mcfw-wdw-right > .margin-panel {
    width: fit-content;
    background: #fff4df;
    /*padding: 16px;*/
    border: 1px solid orange;
    right:0px;
    z-index: 100;
}

.mcfw-widget-design-wrapper .left-info-panel {
    padding: 4px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1000;
}

.mcfw-widget-design-wrapper .right-info-panel {
    padding: 4px;
    position: absolute;
    right:0px;
    top:0px;
    z-index: 1000;
}

.mcfw-widget-design-wrapper .right-info-panel.minified,
.mcfw-widget-design-wrapper .left-info-panel.minified,
.mcfw-widget-design-wrapper .mcfw-wdw-right > .alignment-panel.minified,
.mcfw-widget-design-wrapper .mcfw-wdw-right > .size-panel.minified,
.mcfw-widget-design-wrapper .mcfw-wdw-right > .font-panel.minified,
.mcfw-widget-design-wrapper .mcfw-wdw-right > .padding-panel.minified,
.mcfw-widget-design-wrapper .mcfw-wdw-right > .margin-panel.minified {
    max-width: 120px !important;
    overflow: hidden;
    transition: all 0.0s ease-in-out !important;
    /*height: 80px;*/
    position: relative;
}

.mcfw-widget-design-wrapper .right-info-panel.minified,
.mcfw-widget-design-wrapper .left-info-panel.minified {
    height: fit-content;
    position: absolute;
}

.right-info-panel .mini-view-label,
.left-info-panel .mini-view-label {
    font-family: linearicons;
}

.right-info-panel .mini-view-label:before,
.left-info-panel .mini-view-label:before {
    content: '\e6cb';
}

.mcfw-widget-design-wrapper .mcfw-wdw-center {
    flex-grow: 10;
    min-width: 48px;
}

/* ------ */
.mcfw-wdw-margin-button {
    width:24px;
    height:16px;
    font-size: 10px;
    border: 0px;
    font-family: icomoon-ultimate;
    background: #efefef;
}

.mcfw-wdw-margin-button:hover {
    background: #fae3d4;
}


.mcfw-wdw-general-button {
    width:fit-content;
    height:fit-content;
    font-size: 12px;
    border: 0px;
    background: #efefef;
    margin-left:3px;
    margin-right:3px;
    padding: 4px;
}

.mcfw-wdw-general-button:hover {
    background: #fae3d4;
}

.mcfw-attr-value {
    font-size: 10px;
    font-weight: bold;
    max-width: 100px;
    text-align: center;
    min-height: 15px;
    flex-grow: 1;
}

select.mcfw-attr-value {
    appearance: none;
    border: 1px solid #909090;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    height: 20px;
    padding-left:0px;
    padding-right:0px;
    max-width: 100px;
    font-size: 9.5px;
    font-weight: normal;
    background: white;
    flex-grow: 1;
    width: 100%;
}

input.mcfw-attr-value {
    border: 1px solid #909090;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    height: 20px;
    padding-left:0px;
    padding-right:0px;
    max-width: 30px;
    font-size: 10px;
    font-weight: normal;
    flex-grow: 1;
}

.mcfw-attr-unit {
    font-size: 9.5px;
    border: 1px solid #909090;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 0px;
    height: 20px;
    background: #efefef;
    width: 18px;
    cursor: pointer;
    transition: background 0.2s ease;
    letter-spacing: -0.03rem;
}

.mcfw-attr-unit:hover {
    background: #fae3d4;
}

.attr-input-row {
    display:flex;
    flex-flow:row;
    width: 100%;
    justify-content: center;
}

.mcfw-setting {
    display:flex;
    flex-flow: column;
    align-items: center;
    border: 1px solid white;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
}

.mcfw-setting.winner {
    border:1px solid #91af70;
    background: #eaefe4;
}

.mcfw-setting.winner-default {
    border:1px solid #9069bd;
    background: #d5cce1;
}



.cssprop-change-color {
    color: #ff0000;
    background: #eaefe4;
    font-size: 20px !important;
    margin-left:4px;
}
.cssprop-change-color:before {
    font-size: 20px !important;
}

.mixed-change-color {
    color: #75bff3;
    background: #ffeaea;
    font-size: 20px !important;
    margin-left:4px;
}
.mixed-change-color:before {
    font-size: 20px !important;
}

.nondefault-change-color {
    color: rgba(145, 175, 112, 0.7);
    background: #eaefe4;
    border-radius: 3px;
    font-size: 20px !important;
    margin-left:4px;
}
.nondefault-change-color:before {
    font-size: 20px !important;
}

.default-change-color {
    color: #9069bd;
    background: rgba(213, 204, 225, 0.71);
    border-radius: 3px;
    font-size: 20px !important;
    margin-left:4px;
}
.default-change-color:before {
    font-size: 20px !important;
}


/* ------- */
.mcfw-wdw-clear-value {
    position:absolute;
    width:20px;
    height:20px;
    top:0px;
    right: 0px;
    padding: 0px;
    margin: 0px;
    display: none;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-top-left-radius: 2px;
    transition: background 0.2s ease;
}

.mcfw-wdw-clear-value:hover {
    background: #fae3d4;
}

/* individual attr clear */
.mcfw-setting:hover .mcfw-wdw-clear-value {
    display: flex;
}

/* attr row clear */
.attr-icon-c:hover .mcfw-wdw-clear-value {
    display: flex;
}

.mcfw-wdw-clear-value:before {
    font-family: linearicons;
    content: '\e683';
    color: #595959;
    font-size: 12px;
}

/* ------- */
.mcfw-wdw-label-general,
.mcfw-wdw-label-phone,
.mcfw-wdw-label-tablet,
.mcfw-wdw-label-largescreen,
.mcfw-wdw-label-xlscreen,
.mcfw-wdw-label-xxlscreen {
    font-size: 8px;
}

.mcw-attribute-name {
    font-size:10px;
}

.attr-icon-c > div {
    margin-top: 12px;
    margin-top: 12px;
    padding-left: 13px;
    padding-right: 8px;
    text-align: left;
}

.first-row-in-attr-panel > .attr-icon-c > div.mcw-icon {
    margin-top: 4px;
}

/* ---- TOP LEFT RIGHT BOTTOM ---- */
.mcfw-wdw-icon-top:before {
    font-family: linearicons;
    content: '\e9e2';
    color: #595959;
    font-size: 32px;
}

.mcfw-wdw-icon-left:before {
    font-family: linearicons;
    content: '\e9e5';
    color: #595959;
    font-size: 32px;
}

.mcfw-wdw-icon-right:before {
    font-family: linearicons;
    content: '\e9e7';
    color: #595959;
    font-size: 32px;
}

.mcfw-wdw-icon-bottom:before {
    font-family: linearicons;
    content: '\e9e4';
    color: #595959;
    font-size: 32px;
}


.mcfw-wdw-icon-gallerycolumncount:before {
    font-family: mcw-designer;
    content: '\e902';
    color: #595959;
    font-size: 32px;
}

/* ---- PADDING -  TOP LEFT RIGHT BOTTOM ---- */
.mcfw-wdw-icon-paddingtop:before {
    font-family: mcw-designer;
    content: '\e902';
    color: #595959;
    font-size: 32px;
}

.mcfw-wdw-icon-paddingleft:before {
    font-family: mcw-designer;
    content: '\e903';
    color: #595959;
    font-size: 32px;
}

.mcfw-wdw-icon-paddingright:before {
    font-family: mcw-designer;
    content: '\e901';
    color: #595959;
    font-size: 32px;
}

.mcfw-wdw-icon-paddingbottom:before {
    font-family: mcw-designer;
    content: '\e900';
    color: #595959;
    font-size: 32px;
}

/* ---- MARGIN -  TOP LEFT RIGHT BOTTOM ---- */
.mcfw-wdw-icon-margintop:before {
    font-family: mcw-designer;
    content: '\e906';
    color: #595959;
    font-size: 40px;
}

.mcfw-wdw-icon-marginleft:before {
    font-family: mcw-designer;
    content: '\e905';
    color: #595959;
    font-size: 40px;
}

.mcfw-wdw-icon-marginright:before {
    font-family: mcw-designer;
    content: '\e907';
    color: #595959;
    font-size: 40px;
}

.mcfw-wdw-icon-marginbottom:before {
    font-family: mcw-designer;
    content: '\e904';
    color: #595959;
    font-size: 40px;
}

/* -------- */
.mcfw-wdw-icon-objectfit:before {
    font-family: linearicons;
    content: '\e951';
    color: #595959;
    font-size: 32px;
}


/* -------- */


/* --------- */
.mcfw-wdw-icon-width {
    border-left: 1px solid #4f4f4f;
    border-right: 1px solid #4f4f4f;
    padding-left: 6px;
    padding-right: 6px;
}

.mcfw-wdw-icon-width:before {
    font-family: linearicons;
    content: '\e94c';
    color: #595959;
    font-size: 14px;
    transform-origin: center;
    transform: rotate(45deg);
    display: inline-block;
}
.mcfw-wdw-icon-width:before {
    content: '\e94c';
}


/* --------- */
.mcfw-wdw-icon-height {
    border-top: 1px solid #4f4f4f;
    border-bottom: 1px solid #4f4f4f;
    padding-left: 6px;
    padding-right: 6px;
}

.mcfw-wdw-icon-height:before {
    font-family: linearicons;
    content: '\e94c';
    color: #595959;
    font-size: 14px;
    transform-origin: center;
    transform: rotate(-45deg);
    display: inline-block;
}

/* --------- */
.mcfw-wdw-arrow-type {
    border-top: 1px solid #4f4f4f;
    border-bottom: 1px solid #4f4f4f;
    padding-left: 6px;
    padding-right: 6px;
}
.mcfw-wdw-icon-height:before {
    font-family: linearicons;
    content: '\e93e';
    color: #595959;
    font-size: 14px;
    transform-origin: center;
    transform: rotate(-45deg);
    display: inline-block;
}

/* --------- */
.mcfw-wdw-icon-fontsize,
.mcfw-wdw-icon-lineheight,
.mcfw-wdw-icon-letterspacing,
.mcfw-wdw-icon-textalign,
.mcfw-wdw-icon-overflow,
.mcfw-wdw-icon-display,
.mcfw-wdw-icon-visibility,
.mcfw-wdw-icon-opacity,
.mcfw-wdw-icon-flexflow,
.mcfw-wdw-icon-flexbasis,
.mcfw-wdw-icon-flexgrow,
.mcfw-wdw-icon-align-self,
.mcfw-wdw-icon-align-content,
.mcfw-wdw-icon-align-items,
.mcfw-wdw-icon-justify-content,
.mcfw-wdw-icon-justify-items,
.mcfw-wdw-icon-position {
    border-left: 1px solid #4f4f4f;
    border-right: 1px solid #4f4f4f;
    padding-left: 6px;
    padding-right: 6px;
}

.mcfw-wdw-icon-fontsize:before,
.mcfw-wdw-icon-fontweight:before,
.mcfw-wdw-icon-lineheight:before,
.mcfw-wdw-icon-letterspacing:before,
.mcfw-wdw-icon-textalign:before,
.mcfw-wdw-icon-overflow:before,
.mcfw-wdw-icon-display:before,
.mcfw-wdw-icon-fontfamily:before,
.mcfw-wdw-icon-color:before,
.mcfw-wdw-icon-visibility:before,
.mcfw-wdw-icon-opacity:before,
.mcfw-wdw-icon-flexflow:before,
.mcfw-wdw-icon-flexbasis:before,
.mcfw-wdw-icon-flexgrow:before,
.mcfw-wdw-icon-align-self:before,
.mcfw-wdw-icon-align-content:before,
.mcfw-wdw-icon-align-items:before,
.mcfw-wdw-icon-justify-content:before,
.mcfw-wdw-icon-justify-items:before,
.mcfw-wdw-icon-position:before {
    font-family: linearicons;
    color: #595959;
    font-size: 26px;
    display: inline-block;
}


.mcfw-wdw-icon-align-self:before {
    content: '\e8f4';
}
.mcfw-wdw-icon-align-content:before {
    content: '\e8f4';
}
.mcfw-wdw-icon-align-items:before {
    content: '\e8f4';
}
.mcfw-wdw-icon-justify-content:before {
    content: '\e8f4';
}
.mcfw-wdw-icon-justify-items:before {
    content: '\e8f4';
}


.mcfw-wdw-icon-flexflow:before {
    content: '\e784';
}

.mcfw-wdw-icon-flexbasis:before {
    content: '\e951';
}

.mcfw-wdw-icon-flexgrow:before {
    content: '\e952';
}

.mcfw-wdw-icon-fontfamily:before {
    content: '\e99f';
}
.mcfw-wdw-icon-color:before {
    content: '\e626';
}
.mcfw-wdw-icon-fontweight:before {
    content: '\e814';
}
.mcfw-wdw-icon-fontsize:before {
    content: '\e9a2';
}
.mcfw-wdw-icon-lineheight:before {
    content: '\e9ac';
}
.mcfw-wdw-icon-letterspacing:before {
    content: '\e904';
}
.mcfw-wdw-icon-textalign:before {
    content: '\e987';
}
.mcfw-wdw-icon-overflow:before {
    content: '\e985';
}
.mcfw-wdw-icon-display:before {
    content: '\e798';
}
.mcfw-wdw-icon-visibility:before {
    content: '\e6a5';
}
.mcfw-wdw-icon-opacity:before {
    content: '\e983';
}
.mcfw-wdw-icon-position:before {
    content: '\e951';
}

.mcfw-wdw-icon-general:before,
.mcfw-wdw-icon-phone:before,
.mcfw-wdw-icon-tablet:before,
.mcfw-wdw-icon-largescreen:before,
.mcfw-wdw-icon-xlscreen:before,
.mcfw-wdw-icon-xxlscreen:before {
    width:100%;
    font-size: 24px;
}

.mcfw-wdw-icon-general:before {
    font-family: linearicons;
    content: '\e7ae';
    color: #b194d3;
}
.mcfw-wdw-label-general {
    color: #b194d3;
}

.mcfw-wdw-icon-phone:before {
    font-family: linearicons;
    content: '\e7a5';
    color: #dea95a;
}
.mcfw-wdw-label-phone {
    color: #dea95a;
}
.mcfw-wdw-icon-tablet:before {
    font-family: linearicons;
    content: '\e7ac';
    color: #ef7049;
}
.mcfw-wdw-label-tablet {
    color: #ef7049;
}
.mcfw-wdw-icon-largescreen:before {
    font-family: linearicons;
    content: '\e7ad';
    color: #8dabbb;
}
.mcfw-wdw-label-largescreen {
    color: #8dabbb;
}
.mcfw-wdw-icon-xlscreen:before {
    font-family: linearicons;
    content: '\e7af';
    color: #457188;
}
.mcfw-wdw-label-xlscreen {
    color: #457188;
}
.mcfw-wdw-icon-xxlscreen:before {
    font-family: linearicons;
    content: '\e7af';
    color: #1c4256;
}
.mcfw-wdw-label-xxlscreen {
    color: #1c4256;
}


.mcw-icon-container {
    display: flex;
    flex-flow: row;
    padding-left: 8px;
    font-size: 24px;
}

.mcw-icon-container > *:before {
    font-size: 20px !important;
}

.mcfw-wdw-icon-height:before {
    font-size: 14px !important;
}

.mcfw-wdw-icon-width:before {
    font-size: 14px !important;
}

.mcfw-wdw-icon-marginbottom:before,
.mcfw-wdw-icon-marginleft:before,
.mcfw-wdw-icon-margintop:before,
.mcfw-wdw-icon-marginright:before,
.mcfw-wdw-icon-paddingbottom:before,
.mcfw-wdw-icon-paddingleft:before,
.mcfw-wdw-icon-paddingtop:before,
.mcfw-wdw-icon-paddingright:before {
    font-size: 30px !important;
    margin-bottom: -3px;
    margin-top:3px;
}


/* ------- */
fieldset {
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove orange;
}

/* ----- */
.design-mode-margin {
}

/* -------------- */
.component-list-label {
    font-size: 12px;
    font-weight: bold;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    line-height: 24px;
    background: #efefef;
    border-bottom: 1px solid #8f8f8f;
    padding: 4px;
}

/* -------------- */
.mcfw-minified-label {
    display: flex;
    /*transform: rotate(-90deg);*/
    width: 100%;
    max-width: 100%;
    cursor: pointer;
    transform-origin: center;
    padding-left: 23px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: 1px solid #efefef;
    font-weight: bold;
}

.mcfw-minified-label:before {
    content: '\e93a';
    font-family: 'linearicons';
    flex-grow: 0;
    display:flex;
    flex-flow:row;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    font-size: 16px;
}

.mcfw-minified-label:before {
    color: #723804;
}
.mcfw-minified-label:before:hover {
    background: #efefef;
}
.mcfw-minified-label:before:before {
    content: '\e939';
}

.left-info-panel .mcfw-minified-label {
    display: flex;
    transform: rotate(0deg);
    width:fit-content;
}

.mcfw-minified-label .mini-view-label,
.maxi-view-label {
    width: 100%;
    background: white;
    border-radius: 4px;
    padding: 4px;
    padding-left:16px;
    padding-right: 16px;
    font-size: 12px;
    font-weight: 400;
}

.left-info-panel .mcfw-minified-label .mini-view-label {
    margin-left: 0px;
    padding-left: 4px;
    padding-right: 4px;
}

.mcfw-minified-label .mini-view-label:hover {
    background-color: #ff6104;
    color: white;
}

.mcfw-panel-notminified {
    transition: max-width 0.4s ease-in-out;
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-flow: column;
}

.mcfw-panel-notminified.minimized {
    max-width: 0px;
    overflow: hidden;
}

.panel-header {
    display: flex;
    flex-flow: row;
    width:100%;
    align-items: center;
    border-bottom: 1px solid #efefef;
    border-top: 1px solid #efefef;
    padding-left:16px;
    padding-right:16px;
    padding-top:4px;
    padding-bottom:4px;
    font-size: 12px;
    z-index: 100;
    font-weight: bold;
}
.attr-panel-action-minify,
.panel-action-minify,
.panel-action-stick {
    font-family: 'linearicons';
    flex-grow: 0;
    width:32px;
    height:32px;
    display:flex;
    flex-flow:row;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    font-size: 16px;
}

.attr-panel-action-minify {
    font-family: 'linearicons';
    flex-grow: 0;
    display:flex;
    flex-flow:row;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    font-size: 16px;
    margin-right: 4px;
}

.panel-action-stick {
    color: #723804;
}
.panel-action-stick:hover {
    background: #efefef;
}
.panel-action-stick:before {
    content: '\e778';
}

.panel-action-minify {
    color: #723804;
}
.panel-action-minify:hover {
    background: #efefef;
}
.panel-action-minify:before {
    content: '\e94b';
}

.attr-panel-action-minify {
    color: #723804;
}
.attr-panel-action-minify:hover {
    background: #efefef;
}
.attr-panel-action-minify:before {
    content: '\e939';
}

/* ------- */

.mcfw-wdw-icon-general,
.mcfw-wdw-icon-phone,
.mcfw-wdw-icon-tablet,
.mcfw-wdw-icon-largescreen,
.mcfw-wdw-icon-xlscreen,
.mcfw-wdw-icon-xxlscreen {
    display:none;
}

.first-row-in-attr-panel > div > .mcfw-wdw-icon-general,
.first-row-in-attr-panel > div > .mcfw-wdw-icon-phone,
.first-row-in-attr-panel > div > .mcfw-wdw-icon-tablet,
.first-row-in-attr-panel > div > .mcfw-wdw-icon-largescreen,
.first-row-in-attr-panel > div > .mcfw-wdw-icon-xlscreen,
.first-row-in-attr-panel > div > .mcfw-wdw-icon-xxlscreen {
    display:flex;
}


/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------ */
.mcfw-pager-view {
    margin-top:6rem;
    margin-bottom:6rem;
    position: relative;
    display:flex;
    flex-flow:column;
    height: auto;
    /*margin-left: 4.94vw;
    margin-right: 4.94vw;*/
}
@media (max-width: 1240px) {
    .mcfw-pager-view {
        margin-top: 3rem;
        margin-bottom: 0rem;
        height: auto;
    }
}
@media (max-width: 576px) {
    .mcfw-pager-view {
        margin-top: 3rem;
        margin-bottom: 3rem;
        /*height: 480px;*/
    }
}

/**
 * First on the page
 */
/* ------------------------------------------------ */
.mcfw-pager-view.widget_index_0 {
    margin-top:12rem;
}

@media (max-width: 1240px) {
    .mcfw-pager-view > .background {
        margin-top:10rem;
    }
}
@media (max-width: 768px) {
    .mcfw-pager-view > .background {
        margin-top:8rem;
    }
}
@media (max-width: 576px) {
    .mcfw-pager-view > .background {
        margin-top:6rem;
    }
}
/* ------------------------------------------------ */


/* ------------------------------------------------------------------------ */
.mcfw-pager-view > .content {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    /*width: calc(1154px + (100vw - 1154px)/2);*/
    margin-top:4rem;
    margin-bottom:4rem;
}
@media (max-width: 1240px) {
    .mcfw-pager-view > .content {
        margin-top:4rem;
        margin-bottom:4rem;
    }
}
@media (max-width: 576px) {
    .mcfw-pager-view > .content {
        margin-top:2rem;
        margin-bottom:2rem;
    }
}



/**
 * Customizations
 */

/* ------------------------------------------------------------------------ */
.mcfw-pager-view .aqc-gallery.strip .aqc-gallery-label {
    right: unset;
    left: calc((100vw - 1154px)/2);
    top: -4rem;
    transform: translateY(0%) !important;
}
@media (max-width: 1240px) {
    .mcfw-pager-view .aqc-gallery.strip .aqc-gallery-label {
        right: unset;
        left: 2rem;
        top: 0rem;
        font-size: 62px;
        line-height: 68px;
    }
}
@media (max-width: 576px) {
    .mcfw-pager-view .aqc-gallery.strip .aqc-gallery-label {
        right: unset;
        left: 1rem;
        top: -1rem;
        font-size: 42px;
        line-height: 52px;
    }
}

/* ------------------------------------------------------------------------ */
.mcfw-pager-view .aqc-g-img.first .hist-image-wrapper {
    margin-left: calc((100vw - 1154px)/2);
}
@media (max-width: 1240px) {
    .mcfw-pager-view .aqc-g-img.first .hist-image-wrapper {
        margin-left: 7rem;
    }
}
@media (max-width: 576px) {
    .mcfw-pager-view .aqc-g-img.first .hist-image-wrapper {
        margin-left: 3rem;
    }
}
@media (max-width: 480px) {
    .mcfw-pager-view .aqc-g-img.first .hist-image-wrapper {
        margin-left: 2rem;
    }
}


/* ------------------------------------------------------------------------ */
.mcfw-pager-view .hist-background-rect {
    /*** border-radius: 0px ***/
}

/* ------------------------------------------------------------------------ */
.mcfw-pager-view .hist-image {
    /*** border-radius: 0px ***/
}



.attr-icon-c {
    min-width: 100px;
    position:relative;
}


.mcfw-wdw-btngroup {
    display:flex;
    flex-flow: column;
    padding: 1px;
    justify-items: center;
    align-items: center;
    width: 100%;
}

/* ------------ widget size dependent editors ------- */
.mcfw-general-setting {
    transition: all 0.2s ease-in-out;
    min-width: 54px;
}
.mcfw-lg-setting {
    opacity: 0.2;
    transition: all 0.2s ease-in-out;
    min-width: 54px;
}
.mcfw-md-setting {
    opacity: 0.2;
    transition: all 0.2s ease-in-out;
    min-width: 54px;
}
.mcfw-sm-setting {
    opacity: 0.2;
    transition: all 0.2s ease-in-out;
    min-width: 54px;
}
.mcfw-xl-setting {
    opacity: 0.2;
    transition: all 0.2s ease-in-out;
    min-width: 54px;
}
.mcfw-xxl-setting {
    opacity: 0.2;
    transition: all 0.2s ease-in-out;
    min-width: 54px;
}

.mcfw-setting-active {
    opacity: 1;
}

mcfw-setting-inactive {
    opacity: 0.2;
}


/*.mcfw-lg-setting {
    display: none !important;
}
.mcfw-md-setting {
    display: none !important;;
}
.mcfw-xl-setting {
    display: none !important;;
}
.mcfw-xxl-setting {
    display: none !important;;
}


@media (min-width: 576px) {
    .mcfw-sm-setting {
        opacity: 1;
    }
    .mcfw-md-setting {
        display: flex !important;
    }
}

@media (min-width: 768px) {
    .mcfw-md-setting {
        opacity: 1;
    }
    .mcfw-lg-setting {
        display: flex !important;
    }
}

@media (min-width: 992px) {
    .mcfw-lg-setting {
        opacity: 1;
    }
    .mcfw-xl-setting {
        display: flex !important;
    }
}

@media (min-width: 1200px) {
    .mcfw-xl-setting {
        opacity: 1;
    }
    .mcfw-xxl-setting {
        display: flex !important;
    }
}

@media (min-width: 1400px) {
    .mcfw-xxl-setting {
        opacity: 1;
    }
}*/

.mcfw-wdw-editable-component-list {
    display: flex;
    flex-flow: column;
    background: white;
    width: 100%;
}

.mcfw-wdw-editable-component-list .mcdw-component {
    font-size: 12px;
    background: white;
    cursor: pointer;
    border-radius: 2px;
    padding: 2px;
    padding-left:4px;
    padding-right: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left:4px;
    margin-right:4px;
}

.mcfw-wdw-editable-component-list .mcfw-component:before {
    content: '\e974';
    font-family: mcfw-linearicons;
    width: fit-content;
    border-radius: 4px;
    padding: 4px;
    padding-left:16px;
    padding-right: 16px;
    font-size: 12px;
    font-weight: bold;
}

.mcfw-wdw-editable-component-list .mcdw-component:hover {
    font-size: 12px;
    cursor: pointer;
    background: #f1d7b9;
}
.mcfw-wdw-editable-component-list .mcdw-component.selected {
    font-size: 12px;
    color: white;
    background: #87bb26;
}

/* --------- */
.selected-editable-component {
    /*box-sizing: content-box;*/
    outline:1px solid #87bb26;
    background: repeating-linear-gradient(
            45deg,
            rgba(135, 187, 38, 0.21),
            rgba(135, 187, 38, 0.21) 10px,
            rgba(227, 248, 188, 0.22) 10px,
            rgba(227, 248, 188, 0.22) 20px
    );

}

/*.selected-editable-component:before {
    content: '';
    border: 1px solid #87bb26;
    background: repeating-linear-gradient(
            45deg,
            rgba(135, 187, 38, 0.21),
            rgba(135, 187, 38, 0.21) 10px,
            rgba(227, 248, 188, 0.22) 10px,
            rgba(227, 248, 188, 0.22) 20px
    );
    display: flex;
    width: 100% !important;
    height: 100% !important;;
    position: absolute !important;
    z-index: 100 !important;
    left: 0px !important;
    top: 0px !important;
}*/

/* ----- */
.ec-root-selected:before {
    content: '';
    border: 1px solid rgba(199, 121, 161, 0.61);
    /*box-sizing: content-box;*/
    background: repeating-linear-gradient(
            45deg,
            rgba(199, 121, 161, 0.06),
            rgba(199, 121, 161, 0.06) 10px,
            rgba(199, 121, 161, 0.03) 10px,
            rgba(199, 121, 161, 0.03) 20px
    );
    display: flex;
    width: 100% !important;
    height: 100% !important;;
    position: absolute !important;
    z-index: 100 !important;
    left: 0px !important; /* element padding moves the before tag content otherwise */
    top: 0px !important; /* element padding moves the before tag content otherwise */
}

/* ---- localizable ---- */
.mcw-localizable {
    position:relative;
    cursor: pointer;
}

.mcw-localizable:hover {
    border: 1px solid #a8bfd9;
    background: repeating-linear-gradient(
            45deg,
            rgba(168, 191, 217, 0.4),
            rgba(168, 191, 217, 0.4) 10px,
            rgba(168, 191, 217, 0.1) 10px,
            rgba(168, 191, 217, 0.1) 20px
    );
    position:relative;
}

.selected-text {
    border: 1px solid #2c63a2;
    background: repeating-linear-gradient(
            45deg,
            rgba(168, 191, 217, 0.8),
            rgba(168, 191, 217, 0.8) 10px,
            rgba(168, 191, 217, 0.4) 10px,
            rgba(168, 191, 217, 0.4) 20px
    );
}



/* ---------- */

.mcw-localization-tooltip {
    position:absolute;
    bottom: -44px;
    left:0px;
    background:white;
    padding:8px;
    height: 44px;
    width: 44px;
    z-index: 1000;
    pointer-events: all;
}

.mcw-localization-tooltip:hover {
    background: #f5f5f5;

}

/* ---------- */
.mcw-localizaion-icon:before {
    content: '\e60d';
    font-family: mcfw-linearicons;
    color: #355981;
    font-size: 18px;
}

/* ---------- */


.wdw-attr-check {
    padding-left: 4px;
    padding-right: 4px;
    margin-right: 4px;
}

.wdw-attr-label {
    font-size: 12px;
}

.right-info-panel > .mcw-stick-icon,
.right-info-panel > .mcw-edit-icon {
    cursor: pointer;
    display:flex;
    flex-flow:row;
    justify-items: center;
}

.right-info-panel > .mcw-stick-icon:before,
.right-info-panel > .mcw-edit-icon:before {
    font-family: mcfw-linearicons;
    width: fit-content;
    border: 1px solid #efefef;
    background: white;
    border-radius: 4px;
    padding: 4px;
    padding-left:16px;
    padding-right: 16px;
    font-size: 12px;
    font-weight: bold;
}

/* stick */
.mcw-stick-icon.toggled:before {
    background: orange;
}

.right-info-panel > .mcw-edit-icon:before {
    content: '\e613';
}
.right-info-panel > .mcw-stick-icon:before {
    content: '\e778';
}

.panel-change-container {
    display:flex;
    flex-flow: row;
}

.panel-change-container-minified {
    display:flex;
    flex-flow: row;
}

.panel-change-container .mcw-icon,
.panel-change-container .mcf-icon::before,
.panel-change-container-minified .mcw-icon,
.panel-change-container-minified .mcf-icon::before {
    font-size: 10px !important;
}

.mcdw-label {
    line-height: 30px;
    font-size: 15px;
}

.mcw-icon {
    line-height: 24px;
}

.mcfw-wdw-icon-marginbottom,
.mcfw-wdw-icon-marginleft,
.mcfw-wdw-icon-margintop,
.mcfw-wdw-icon-marginright,
.mcfw-wdw-icon-paddingbottom,
.mcfw-wdw-icon-paddingleft,
.mcfw-wdw-icon-paddingtop,
.mcfw-wdw-icon-paddingright {
    padding-top:3px;
    margin-bottom: -3px;
}

.mcdw-component {
    display:flex;
    flex-flow: row;
}

.mcdw-icon {
    font-family: linearicons;
    font-size: 18px;
    color: #87bb26;
    width: 24px;
    line-height: 27px;
}

.mcdw-component.selected .mcdw-icon {
    color: white;
}

.mcdw-icon.default-component:before {
    content: '\e717';
}

.mcdw-icon.image-component:before {
    content: '\e70e';
    font-weight: 600;
}

.mcdw-icon.gallery-component:before {
    content: '\e711';
    font-weight: 600;
}

/* ----- editor form embedded ----- */


/* ---- root editor no padding */
.widget-editor-container > div > ul > li > div > div > div > section.mcfw-edit-section {
    padding: 0px;
}


.mcw-image-overlay {
    width: 32px;
    height: 32px;
}