.ab_testing{display: block; }

.requiere.ab_testing{--ab_colorA:magenta;--ab_colorB:cyan;}



.editableZone .requiere.ab_testing i.fa-code, .editableZone .requiere.ab_testing i.fa-lock{display: none;}

.requiere.ab_testing .ui-testing .selectLike, .requiere.ab_testing .ui-testing .middle{width:30%;display: inline-block;}
.requiere.ab_testing .ui-testing .selectLike{position: relative; z-index: 99; min-height:2em;}
.requiere.ab_testing .ui-testing .selectLike ul>li, .requiere.ab_testing .ui-testing .selectLike ul{display: flex;flex-direction: column; line-height: 1.5em;width: 100%;}
.requiere.ab_testing .ui-testing .selectLike ul{ background:#FFF;padding: 5px;border:1px solid #CCC; border-radius:15px; min-height:inherit;}
.requiere.ab_testing .ui-testing .selectLike ul{position: absolute;}
.requiere.ab_testing .ui-testing .selectLike ul li{padding-left: 20px; padding-right:50px;}
.requiere.ab_testing .ui-testing .selectLike ul>li:not(li[data-selected]){display: none;}
.requiere.ab_testing .ui-testing .selectLike ul::before{content:"";width: 0.7em; height: 0.7em; border: 1.5px solid #000; border-bottom: none; border-right:none; transform: rotate(-135deg) translateX(-50%); position: absolute; right: 1em;top: .25em;z-index: 2;}
.requiere.ab_testing .ui-testing .selectLike ul:hover>li:not(li[data-selected]){display: flex;}
.requiere.ab_testing .ui-testing .selectLike ul li:hover{background-color: rgba(0,0,0, 0.05); border-radius: 15px; color: #000}
.requiere.ab_testing .ui-testing .selectLike ul:hover li[data-disabled="disabled"] ~ li[data-selected="selected"]{color: #000; position: relative; padding-left:2em; font-weight: bolder}
.requiere.ab_testing .ui-testing .selectLike ul:hover li[data-disabled="disabled"] ~ li[data-selected="selected"]::before{content:"";width: 0.2em; height: 0.7em; border: 1.5px solid #000; border-bottom: none; border-right:none; transform: rotate(-135deg) translateX(-50%); position: absolute; left: 1em;top: .25em;z-index: 2;}
.requiere.ab_testing .ui-testing .selectLike ul li[data-selected="selected"],
.requiere.ab_testing .ui-testing .selectLike ul:hover li[data-disabled="disabled"][data-selected="selected"]{order:1}
.requiere.ab_testing .ui-testing .selectLike ul:hover li[data-disabled="disabled"]{order:1;}
.requiere.ab_testing .ui-testing .selectLike ul:hover li[data-selected="selected"]{order:2;}
.requiere.ab_testing .ui-testing .selectLike ul:hover li{order:3;}
.requiere.ab_testing .ui-testing .selectLike ul li[data-disabled="disabled"]{opacity: 0.5; pointer-events: none; }
.ab_testing .ui-testing{font-family: Arial; color:#434343}
.ab_testing .ui-testing .pagesAB>.iframeInside{
	height: 0;padding-bottom: calc(27.25% - 8px);
}
.ab_testing .ui-testing #pagesAB{margin-left: 4px}
.ab_testing .ui-testing .pagesAB>*{
  width:calc(50% - 2px);display: inline-block;vertical-align: top; margin-top: 15px; margin-bottom: 0;position: relative;outline-width: 4px;outline-style: solid;outline-color: var(--ab_colorB);
}
.ab_testing .ui-testing #pagesAB>*{width:calc(50% - 8px);}
.ab_testing .ui-testing #pagesAB>*:first-child{margin-right: 8px}
.requiere.ab_testing .ui-testing .selectLike[data-name=A]{/*color:var(--ab_colorA)*/}
.requiere.ab_testing .ui-testing .selectLike[data-name=B]{/*color:var(--ab_colorB)*/}
.requiere.ab_testing .ui-testing .selectLike[data-name=A] ul::before,
.requiere.ab_testing .ui-testing .selectLike[data-name=A] ul{border-color:var(--ab_colorA)}
.requiere.ab_testing .ui-testing .selectLike[data-name=B] ul::before,
.requiere.ab_testing .ui-testing .selectLike[data-name=B] ul{border-color:var(--ab_colorB)}
.ab_testing .ui-testing .pagesAB>*:first-child{outline-color: var(--ab_colorA)}

.ab_testing .ui-testing .pagesAB .dezoom{transform: scale(.5); transform-origin:top left; padding-bottom: 108%; width: 200%;}
.ab_testing .ui-testing .pagesAB .dezoom iframe{width: 100%; height: 100%;position: absolute;top: 0;left: 0;}

.ab_testing #pagesAB>*.ok::before{z-index: 999999;
	content:''; position: absolute; left: 25px;top: 25px; border: 4px solid limegreen; border-bottom: none; border-right:none; transform: rotate(-135deg); width: 10px; height: 25px;
}
.ab_testing .ui-testing .reporting{font-size: 0;}
.ab_testing .noOutline .top{font-size: 2rem; color:#FFF; font-weight: bolder; padding: 1em;text-align: center;}
.ab_testing .reportA .top{background-color: var(--ab_colorA)}
.ab_testing .reportB .top{background-color: var(--ab_colorB)}
.ab_testing .ui-testing .pagesAB>*.noOutline{outline: none; font-size: 0;margin-top: 0; border:10px solid #000}
.ab_testing .ui-testing .pagesAB>*.noOutline.reportA{border-color: var(--ab_colorA)}
.ab_testing .ui-testing .pagesAB>*.noOutline.reportB{border-color: var(--ab_colorB)}
.ab_testing .ui-testing .pagesAB svg{display: inline-block; width: 45%; margin-right: 2.5%; ; margin-left: 2.5%;vertical-align: middle; margin-top: 5%;margin-bottom: 5%;}
.histo{width: 45%; display: inline-block; vertical-align: middle; font-size: 10px;}
.histo>div{ margin-bottom: 15px; font-size: 1.5em; }
.histo>div div{ background:#EFEFEF; height:30px;}
.histo>div .A{background: var(--ab_colorA)}
.histo>div .B{background: var(--ab_colorB);margin-left: auto}