.draggable-component-item,
.component-list .components div.layout-cell,
div.control-componentlist div.components div.layout-cell{font-size:11px;cursor:pointer;background:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.draggable-component-item:hover,
.component-list .components div.layout-cell:hover,
div.control-componentlist div.components div.layout-cell:hover{background:#3498db}
.draggable-component-item>div,
.component-list .components div.layout-cell>div,
div.control-componentlist div.components div.layout-cell>div{white-space:normal;color:#475354;position:relative;border-right:1px solid #ecf0f1}
.draggable-component-item>div:before,
.component-list .components div.layout-cell>div:before,
div.control-componentlist div.components div.layout-cell>div:before{position:absolute;font-size:16px;left:15px;top:7px;opacity:0.7;filter:alpha(opacity=70)}
.draggable-component-item>div:hover,
.component-list .components div.layout-cell>div:hover,
div.control-componentlist div.components div.layout-cell>div:hover{color:#fff}
.draggable-component-item>div:hover:before,
.component-list .components div.layout-cell>div:hover:before,
div.control-componentlist div.components div.layout-cell>div:hover:before{opacity:1;filter:alpha(opacity=100)}
.draggable-component-item>div:after,
.component-list .components div.layout-cell>div:after,
div.control-componentlist div.components div.layout-cell>div:after{position:absolute;font-size:37px;top:1px;z-index:50;color:#fff;text-shadow:0 0 1px #475354;width:12px;overflow:hidden;text-indent:-25px;right:-12px;font-family:"Font Awesome 6 Free";font-weight:900;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;font-variant:normal;text-rendering:auto;content:"\f12e"}
.draggable-component-item>div:hover:after,
.component-list .components div.layout-cell>div:hover:after,
div.control-componentlist div.components div.layout-cell>div:hover:after{text-shadow:none;color:#3498db}
.draggable-component-item>div span,
.component-list .components div.layout-cell>div span,
div.control-componentlist div.components div.layout-cell>div span{display:block}
.draggable-component-item>div span.name,
.component-list .components div.layout-cell>div span.name,
div.control-componentlist div.components div.layout-cell>div span.name{white-space:nowrap;padding:8px 15px 0;font-weight:400;line-height:20px;font-size:13px}
.draggable-component-item>div span.description,
.component-list .components div.layout-cell>div span.description,
div.control-componentlist div.components div.layout-cell>div span.description{padding:0 15px 10px;margin-top:8px;font-weight:400;font-size:11px;line-height:150%}
.draggable-component-item.placeholder>div,
.component-list .components div.layout-cell.placeholder>div,
div.control-componentlist div.components div.layout-cell.placeholder>div{background:#e0e0e0;color:#e0e0e0}
.draggable-component-item.placeholder>div:before,
.component-list .components div.layout-cell.placeholder>div:before,
div.control-componentlist div.components div.layout-cell.placeholder>div:before,
.draggable-component-item.placeholder>div:after,
.component-list .components div.layout-cell.placeholder>div:after,
div.control-componentlist div.components div.layout-cell.placeholder>div:after{color:#e0e0e0 !important;text-shadow:none !important}
[data-field-name="components"] + .control-tabs.primary-tabs{margin-top:-10px}
div.control-componentlist{position:relative;padding:0;-webkit-transition:all 0.3s ease;transition:all 0.3s ease}
div.control-componentlist.droppable{background-color:#f0b37e}
div.control-componentlist.has-components{padding:0 20px 20px}
div.control-componentlist div.layout{width:auto}
div.control-componentlist div.components div.layout-cell.error-component{background:#ab2a1c}
div.control-componentlist div.components div.layout-cell.error-component>div{color:#fff}
div.control-componentlist div.components div.layout-cell.error-component>div:after{color:#ab2a1c}
div.control-componentlist div.components div.layout-cell.warning-component{background:#ffc107}
div.control-componentlist div.components div.layout-cell.warning-component>div{color:#343a40}
div.control-componentlist div.components div.layout-cell.warning-component>div:after{color:#ffc107}
div.control-componentlist div.components div.layout-cell:first-child{border-bottom-left-radius:3px;border-top-left-radius:3px}
div.control-componentlist div.components div.layout-cell:last-child{margin-right:0;border-bottom-right-radius:3px;border-top-right-radius:3px}
div.control-componentlist div.components div.layout-cell:last-child>div{border-right:none}
div.control-componentlist div.components div.layout-cell:last-child>div:after{display:none}
div.control-componentlist div.components div.layout-cell:nth-child(2n)>div:after{top:auto;bottom:5px}
div.control-componentlist div.components div.layout-cell:first-child>div.popover-highlight{border-bottom-left-radius:3px;border-top-left-radius:3px}
div.control-componentlist div.components div.layout-cell:last-child>div.popover-highlight{border-bottom-right-radius:3px;border-top-right-radius:3px}
div.control-componentlist div.components div.layout-cell>div{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);-webkit-transition:-webkit-transform 0.2s;-moz-transition:-moz-transform 0.2s;-o-transition:-o-transform 0.2s;transition:transform 0.2s;max-width:250px;min-width:170px}
div.control-componentlist div.components div.layout-cell>div.popover-highlight{border-right-color:rgba(0,0,0,0);background:#fff !important;color:#475354 !important}
div.control-componentlist div.components div.layout-cell>div.popover-highlight:before{opacity:0.7;filter:alpha(opacity=70)}
div.control-componentlist div.components div.layout-cell>div.popover-highlight:after{color:#fff;text-shadow:none}
div.control-componentlist div.components div.layout-cell>div.popover-highlight a.remove{display:none}
div.control-componentlist div.components div.layout-cell>div span.name{padding-left:38px}
div.control-componentlist div.components div.layout-cell>div span.description{padding-bottom:35px}
div.control-componentlist div.components div.layout-cell>div span.alias{padding:0 15px;font-weight:500;position:absolute;width:100%;bottom:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
div.control-componentlist div.components div.layout-cell>div span.alias:before{margin-right:4px;opacity:0.55;filter:alpha(opacity=55)}
div.control-componentlist div.components div.layout-cell>div a.remove{position:absolute;display:inline-block;top:1px;right:5px;color:#000;font-size:17px;font-weight:bold;opacity:0.3;filter:alpha(opacity=30)}
div.control-componentlist div.components div.layout-cell>div a.remove:hover{opacity:0.5;filter:alpha(opacity=50);text-decoration:none}
div.control-componentlist div.components div.layout-cell.adding>div{-webkit-transform:translate(0,-100px) !important;-ms-transform:translate(0,-100px) !important;transform:translate(0,-100px) !important}
.draggable-component-item{opacity:0.6;filter:alpha(opacity=60)}
.draggable-component-item span.alias{display:none}
.draggable-component-item a.remove{display:none}
.component-list .components div.layout div.layout-row div.layout-cell{border-top:1px solid #ecf0f1}
.component-list .components div.layout div.layout-row div.layout-cell span.alias{display:none}
.component-list .components div.layout div.layout-row div.layout-cell a.remove{display:none}
.component-list .components div.layout div.layout-row div.layout-cell:last-child>div{border-right:none}
.component-list .components div.layout div.layout-row div.layout-cell:last-child>div:after{display:none}
.component-list .components div.layout div.layout-row div.layout-cell>div:before{position:absolute;font-size:37px;top:1px;z-index:50;color:#fff;text-shadow:0 0 1px #475354;width:12px;overflow:hidden;text-indent:-25px;right:-12px;font-family:"Font Awesome 6 Free";font-weight:900;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;font-variant:normal;text-rendering:auto;content:"\f12e";-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:1;filter:alpha(opacity=100);left:auto;top:-17px;right:15px}
.component-list .components div.layout div.layout-row div.layout-cell>div:hover:before{text-shadow:none;color:#3498db}
.component-list .components div.layout div.layout-row:first-child div.layout-cell>div:before{display:none}
.component-list .components div.layout.single div.layout-row>div.layout-cell>div{border-right:none}
.component-list .components div.layout.single div.layout-row>div.layout-cell>div:before{display:block;right:55.5%}
.control-filelist.component-list ul li div.group{background:#f1f3f4;border-top:1px solid #e6ebed;padding:10px 15px 10px 10px;position:relative;cursor:pointer}
.control-filelist.component-list ul li div.group h4{text-transform:uppercase;font-size:14px;margin-top:3px}
.control-filelist.component-list ul li div.group h4 a{padding-left:33px}
.control-filelist.component-list ul li div.group h4 a:before{left:0}
.control-filelist.component-list ul li div.group h4 a:after{display:none}
.control-filelist.component-list ul li div.group span.description{display:block;font-size:13px;padding-left:33px;color:#8f8f8f}
.control-filelist.component-list ul li div.group i{position:absolute;left:22px;top:21px;font-size:16px;opacity:0.7;filter:alpha(opacity=70);color:#405261}
.touch div.control-componentlist div.components div.layout-cell>div:hover,
.touch div.control-componentlist div.components div.layout-cell>div:active,
.touch div.control-componentlist div.components div.layout-cell>div:active:focus{background:#fff;color:#475354}
.touch div.control-componentlist div.components div.layout-cell>div:hover:after,
.touch div.control-componentlist div.components div.layout-cell>div:active:after,
.touch div.control-componentlist div.components div.layout-cell>div:active:focus:after{text-shadow:0 0 1px #475354 !important;color:#fff !important}
body.drag div.control-componentlist div.components div.layout-cell>div,
body.drag div.control-componentlist div.components div.layout-cell>div:hover,
body.drag div.control-componentlist div.components div.layout-cell>div:active{background:#fff;color:#475354}
body.drag div.control-componentlist div.components div.layout-cell>div:after,
body.drag div.control-componentlist div.components div.layout-cell>div:hover:after,
body.drag div.control-componentlist div.components div.layout-cell>div:active:after{text-shadow:0 0 1px #475354 !important;color:#fff !important}