.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:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;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:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;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}