#slidePreview {
  padding: 64px 32px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.templatePlaceholder {
  background: #bfbfbf;
  padding: 24px 8px;
  color: #404040;
  font-size: 12px;
  text-align: center;
  cursor: move; }

.contentBuilderSidebar {
  position: fixed;
  left: 100%;
  top: 0;
  bottom: 0;
  background: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.25);
  padding: 8px;
  padding-top: 56px;
  width: 200px;
  z-index: 98; }
  .contentBuilderSidebar .contentBuilderSidebarToggle {
    white-space: nowrap;
    position: absolute;
    right: 100%;
    padding: 6px 8px;
    background: white;
    top: 64px;
    box-shadow: -2px 0px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase; }
    .contentBuilderSidebar .contentBuilderSidebarToggle svg {
      width: 10px;
      height: 10px;
      transform: rotate(180deg); }
  .contentBuilderSidebar .contentBuilderTemplatesWrapper {
    overflow-y: scroll;
    position: absolute;
    top: 96px;
    right: 8px;
    left: 8px;
    bottom: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 8px; }
    .contentBuilderSidebar .contentBuilderTemplatesWrapper .colTemplate a, .contentBuilderSidebar .contentBuilderTemplatesWrapper .colTemplate img {
      display: block; }
    .contentBuilderSidebar .contentBuilderTemplatesWrapper .colTemplate img {
      border: 1px solid rgba(0, 0, 0, 0.2);
      cursor: move; }
      .contentBuilderSidebar .contentBuilderTemplatesWrapper .colTemplate img:hover {
        border: 1px solid black; }
  .contentBuilderSidebar.active {
    right: 0;
    left: auto; }
    .contentBuilderSidebar.active .contentBuilderSidebarToggle svg {
      transform: none; }

.sortable-item {
  padding: 8px;
  padding-left: 32px;
  position: relative;
  border: 1px solid #bfbfbf; }

.rowTemplate {
  border: 1px solid rgba(0, 0, 0, 0.5); }
  .rowTemplate img {
    display: block; }
  .rowTemplate.active {
    box-shadow: 0 0 6px 0 #4988d6;
    border: 1px solid #4988d6; }

.sortable-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 50%;
  background: #e6e6e6;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  cursor: move;
  color: gray;
  transition: ease all 0.2s; }
  .sortable-handle:hover {
    background: #d9d9d9; }
  .sortable-handle svg {
    width: 16px !important;
    height: 16px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%); }

.sortable-item .ui-spinner {
  display: block; }

.sortable-delete {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 50%;
  background: #e6e6e6;
  border-right: 1px solid #bfbfbf;
  cursor: pointer;
  color: gray; }
  .sortable-delete:hover {
    background: #d9d9d9; }
  .sortable-delete svg {
    width: 16px !important;
    height: 16px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%); }

/*#contentBuilderTemplates {
	position: fixed;
	left: 100%;
	top: 0;
	bottom: 0;
	transition: all ease 0.25s;
	background: white;
	box-shadow: 0 1px 8px rgba(black, 0.2);
	border-left: 1px solid rgba(black, 0.2);
	z-index: 999;
	width: 250px;
	&.active {
		left: auto;
		right: 0;
		.btnToggleSidebar {
			svg {
				transform: none;
			}
		}
	}
	.btnToggleSidebar {
		position: absolute;
		top: 32px;
		right: 100%;
		background: white;
		border: 1px solid rgba(black, 0.2);
		border-right: 0;
		padding: 4px 8px;
		white-space: nowrap;
		text-transform: uppercase;
		font-size: 12px;
		line-height: 16px;
		color: rgba(black, 0.8);
		cursor: pointer;
		svg {
			transform: rotate(180deg);
			width: 16px;
			height: 16px;
			color: rgba(black, 0.5);
			vertical-align: top;
		}
	}
	.templateList {
		padding: 8px;
		height: 100%;
		overflow-y: auto;
		.templateItem {

		}
	}
}*/
#dialogAddWidget .btnAddWidgetDialog {
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: block; }
  #dialogAddWidget .btnAddWidgetDialog:hover {
    text-decoration: none; }
  #dialogAddWidget .btnAddWidgetDialog svg {
    width: 32px;
    height: 32px;
    margin-right: 8px; }

.contentBuilderHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  z-index: 99;
  padding: 8px; }

.widget[data-widget-type="wysiwyg"] > .contentBuilderWidgetControls > .widgetOptions {
  display: none; }

.widget[data-widget-type="wysiwyg"] > .contentBuilderWidgetControls > .widgetDuplicate {
  border-bottom-left-radius: 4px; }

.widget[data-widget-type="separator"] > .contentBuilderWidgetControls > .widgetOptions {
  display: none; }

.widget[data-widget-type="separator"] > .contentBuilderWidgetControls > .widgetDuplicate {
  border-bottom-left-radius: 4px; }

/*.widget[data-widget-type="login"] > .contentBuilderWidgetControls {
	> .widgetOptions {
		display: none;
	}
	> .widgetDuplicate {
		border-bottom-left-radius: 4px;
	}
}*/
#contentBuilder {
  padding: 62px;
  padding-top: 110px; }
  #contentBuilder.hideVisualAids .contentBuilderAddWidget, #contentBuilder.hideVisualAids .contentBuilderAddColumn, #contentBuilder.hideVisualAids .contentBuilderRowControls, #contentBuilder.hideVisualAids .contentBuilderColumnControls, #contentBuilder.hideVisualAids .contentBuilderWidgetControls {
    display: none !important; }
  #contentBuilder .wysiwyg-content {
    z-index: 1;
    position: relative; }
  #contentBuilder .col.xlarge-1 > .widget > .contentBuilderWidgetControls .widgetAddBelow, #contentBuilder .col.xlarge-1 > .widget > .contentBuilderWidgetControls .widgetAddAbove {
    font-size: 0; }
    #contentBuilder .col.xlarge-1 > .widget > .contentBuilderWidgetControls .widgetAddBelow:hover, #contentBuilder .col.xlarge-1 > .widget > .contentBuilderWidgetControls .widgetAddAbove:hover {
      font-size: 12px; }
  #contentBuilder .col.xlarge-1 > .contentBuilderColumnControls:after, #contentBuilder .col.xlarge-2 > .contentBuilderColumnControls:after, #contentBuilder .col.xlarge-3 > .contentBuilderColumnControls:after {
    display: none; }
  #contentBuilder .col.xlarge-1 > .widget > .contentBuilderWidgetControls:after, #contentBuilder .col.xlarge-2 > .widget > .contentBuilderWidgetControls:after, #contentBuilder .col.xlarge-3 > .widget > .contentBuilderWidgetControls:after, #contentBuilder .col.xlarge-4 > .widget > .contentBuilderWidgetControls:after, #contentBuilder .col.xlarge-5 > .widget > .contentBuilderWidgetControls:after {
    display: none; }
  #contentBuilder .button-wrapper [href] {
    pointer-events: none; }
  #contentBuilder .slideshow-wrapper [href] {
    pointer-events: none; }

.label {
  padding-bottom: 2px; }

.row .btnAddColumn {
  display: none;
  opacity: 0;
  z-index: 1;
  position: relative; }
  .row .btnAddColumn.active {
    display: block; }

.row.active .btnAddColumn.active {
  opacity: 1;
  text-align: center;
  background: rgba(142, 68, 173, 0.8);
  color: white;
  padding: 8px 16px;
  display: block;
  font-size: 12px; }
  .row.active .btnAddColumn.active svg {
    width: 12px;
    height: 12px; }
  .row.active .btnAddColumn.active:hover {
    background: #8e44ad;
    text-decoration: none; }

.col .btnAddWidget {
  display: none;
  opacity: 0;
  z-index: 1;
  position: relative; }
  .col .btnAddWidget.active {
    display: block; }

.col.active .btnAddWidget.active {
  opacity: 1;
  text-align: center;
  background: rgba(192, 57, 43, 0.8);
  color: white;
  padding: 8px 16px;
  display: block;
  font-size: 12px; }
  .col.active .btnAddWidget.active svg {
    width: 12px;
    height: 12px; }
  .col.active .btnAddWidget.active:hover {
    background: #c0392b;
    text-decoration: none; }

.colPadding {
  padding: 8px; }

.widget {
  padding: 8px; }
  .widget > *:not(.contentBuilderWidgetControls):not(.mce-content-body) {
    pointer-events: none;
    user-select: none; }

.row {
  position: relative;
  z-index: 1 !important; }
  .row.active .contentBuilderRowControls {
    opacity: 1;
    outline: 1px dashed rgba(41, 128, 185, 0.5); }
  .row .col {
    position: relative;
    z-index: 1 !important; }
    .row .col:hover {
      z-index: 2 !important; }
    .row .col.columnSelected {
      outline: 1px dashed rgba(0, 0, 0, 0.2); }
    .row .col.ui-sortable-helper {
      opacity: 0.2; }
    .row .col .widget {
      position: relative;
      z-index: 1 !important; }
      .row .col .widget .mce-content-body {
        min-height: 1em; }
      .row .col .widget:hover {
        z-index: 2 !important; }
    .row .col.columnAdded .contentBuilderColumnControls {
      animation: rowAdded .5s step-end;
      animation-iteration-count: 2; }

@keyframes rowAdded {
  50% {
    border: 1px dashed #64bf59;
    color: #64bf59;
    background: rgba(100, 191, 89, 0.2);
    opacity: 1; } }
  .row.rowSelected {
    outline: 1px dashed rgba(0, 0, 0, 0.2); }
  .row.ui-sortable-helper {
    opacity: 0.2; }
  .row:hover {
    z-index: 2 !important; }
  .row.rowAdded .contentBuilderAddColumn {
    animation: rowAdded .5s step-end;
    animation-iteration-count: 2; }

@keyframes rowAdded {
  50% {
    border: 1px dashed #64bf59;
    color: #64bf59;
    background: rgba(100, 191, 89, 0.2);
    opacity: 1; } }
  .row .contentBuilderRowControls {
    position: absolute;
    top: -48px;
    left: -48px;
    right: -48px;
    bottom: -48px;
    opacity: 0;
    transition: opacity ease 0.2s;
    font-size: 12px;
    cursor: pointer; }
    .row .contentBuilderRowControls:after {
      content: 'Row';
      padding: 6px 8px;
      background: rgba(41, 128, 185, 0.8);
      border-bottom: 0;
      position: absolute;
      text-transform: uppercase;
      top: -25px;
      left: 0;
      line-height: 13px;
      font-size: 12px;
      font-weight: bold;
      color: white;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px; }
    .row .contentBuilderRowControls svg {
      width: 16px;
      height: 16px; }
    .row .contentBuilderRowControls .contentBuilderRowControl {
      padding: 4px;
      background: rgba(41, 128, 185, 0.8);
      color: white;
      /*box-shadow: inset 0 1px 0 0 rgba(white, 0.2);
			border: 1px solid darken(white, 60%);*/
      transition: all ease 0.2s; }
      .row .contentBuilderRowControls .contentBuilderRowControl:hover {
        background: #2980b9;
        z-index: 1; }
    .row .contentBuilderRowControls .rowHandle {
      position: absolute;
      top: 0;
      right: 100%;
      border-top-left-radius: 4px;
      cursor: move; }
    .row .contentBuilderRowControls .rowDelete {
      position: absolute;
      top: 0;
      left: 100%;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px; }
    .row .contentBuilderRowControls .rowDuplicate {
      position: absolute;
      top: 24px;
      right: 100%; }
    .row .contentBuilderRowControls .rowOptions {
      position: absolute;
      top: 48px;
      right: 100%;
      border-bottom-left-radius: 4px; }
    .row .contentBuilderRowControls .rowAddAbove {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      padding: 4px 6px; }
      .row .contentBuilderRowControls .rowAddAbove svg {
        padding: 2px; }
    .row .contentBuilderRowControls .rowAddBelow {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      padding: 4px 6px; }
      .row .contentBuilderRowControls .rowAddBelow svg {
        padding: 2px; }
  .row .col.active .contentBuilderColumnControls {
    opacity: 1;
    outline: 1px dashed rgba(142, 68, 173, 0.5); }
  .row .contentBuilderColumnControls {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    opacity: 0;
    transition: opacity ease 0.2s;
    cursor: pointer;
    font-size: 12px; }
    .row .contentBuilderColumnControls:after {
      content: 'Column';
      padding: 6px 8px;
      background: rgba(142, 68, 173, 0.8);
      border-bottom: 0;
      position: absolute;
      text-transform: uppercase;
      top: -25px;
      left: 0;
      line-height: 13px;
      font-size: 12px;
      font-weight: bold;
      color: white;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px; }
    .row .contentBuilderColumnControls svg {
      width: 16px;
      height: 16px; }
    .row .contentBuilderColumnControls .contentBuilderColumnControl {
      padding: 4px;
      background: rgba(142, 68, 173, 0.8);
      color: white;
      /*box-shadow: inset 0 1px 0 0 rgba(white, 0.2);
			border: 1px solid darken(white, 60%);*/
      transition: all ease 0.2s; }
      .row .contentBuilderColumnControls .contentBuilderColumnControl:hover {
        background: #8e44ad;
        z-index: 1; }
    .row .contentBuilderColumnControls .columnHandle {
      position: absolute;
      top: 0;
      right: 100%;
      border-top-left-radius: 4px;
      cursor: move; }
    .row .contentBuilderColumnControls .columnDelete {
      position: absolute;
      top: 0;
      left: 100%;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px; }
    .row .contentBuilderColumnControls .columnDuplicate {
      position: absolute;
      top: 24px;
      right: 100%; }
    .row .contentBuilderColumnControls .columnOptions {
      position: absolute;
      top: 48px;
      right: 100%;
      border-bottom-left-radius: 4px; }
    .row .contentBuilderColumnControls .columnAddAbove {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      white-space: nowrap;
      padding: 4px 6px; }
      .row .contentBuilderColumnControls .columnAddAbove svg {
        padding: 2px; }
    .row .contentBuilderColumnControls .columnAddBelow {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      white-space: nowrap;
      padding: 4px 6px; }
      .row .contentBuilderColumnControls .columnAddBelow svg {
        padding: 2px; }
  .row .widget.active .contentBuilderWidgetControls {
    opacity: 1;
    outline: 1px dashed rgba(192, 57, 43, 0.5); }
  .row .contentBuilderWidgetControls {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    opacity: 0;
    transition: opacity ease 0.2s;
    cursor: pointer;
    font-size: 12px; }
    .row .contentBuilderWidgetControls:after {
      content: 'Content Block';
      padding: 6px 8px;
      background: rgba(192, 57, 43, 0.8);
      border-bottom: 0;
      position: absolute;
      text-transform: uppercase;
      top: -25px;
      left: 0;
      line-height: 13px;
      font-size: 12px;
      font-weight: bold;
      color: white;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px; }
    .row .contentBuilderWidgetControls svg {
      width: 16px;
      height: 16px; }
    .row .contentBuilderWidgetControls .contentBuilderWidgetControl {
      padding: 4px;
      background: rgba(192, 57, 43, 0.8);
      color: white;
      /*box-shadow: inset 0 1px 0 0 rgba(white, 0.2);
			border: 1px solid darken(white, 60%);*/
      transition: all ease 0.2s; }
      .row .contentBuilderWidgetControls .contentBuilderWidgetControl:hover {
        background: #c0392b;
        z-index: 1; }
    .row .contentBuilderWidgetControls .widgetHandle {
      position: absolute;
      top: 0;
      right: 100%;
      border-top-left-radius: 4px;
      cursor: move; }
    .row .contentBuilderWidgetControls .widgetDelete {
      position: absolute;
      top: 0;
      left: 100%;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px; }
    .row .contentBuilderWidgetControls .widgetDuplicate {
      position: absolute;
      top: 24px;
      right: 100%; }
    .row .contentBuilderWidgetControls .widgetOptions {
      position: absolute;
      top: 48px;
      right: 100%;
      border-bottom-left-radius: 4px; }
    .row .contentBuilderWidgetControls .widgetAddAbove {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      white-space: nowrap;
      padding: 4px 6px; }
      .row .contentBuilderWidgetControls .widgetAddAbove svg {
        padding: 2px; }
    .row .contentBuilderWidgetControls .widgetAddBelow {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      white-space: nowrap;
      padding: 4px 6px; }
      .row .contentBuilderWidgetControls .widgetAddBelow svg {
        padding: 2px; }
  .row .contentBuilderAddColumn {
    background: rgba(142, 68, 173, 0.8);
    text-align: center;
    color: white;
    padding: 4px 8px;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    font-size: 14px;
    cursor: pointer;
    position: relative;
    transition: ease all 0.2s;
    margin: 0 auto;
    width: 180px;
    position: absolute; }
    .row .contentBuilderAddColumn:hover {
      background: #8e44ad; }
    .row .contentBuilderAddColumn svg {
      width: 12px;
      height: 12px; }
  .row .contentBuilderAddWidget {
    background: rgba(192, 57, 43, 0.8);
    text-align: center;
    color: white;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    transition: ease all 0.2s;
    margin: 0 auto;
    width: 180px;
    position: absolute; }
    .row .contentBuilderAddWidget:hover {
      background: #c0392b; }
    .row .contentBuilderAddWidget svg {
      width: 12px;
      height: 12px; }

#contentBuilder .contentBuilderAddRow {
  background: rgba(41, 128, 185, 0.8);
  text-align: center;
  color: white;
  padding: 4px 8px;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  font-size: 14px;
  cursor: pointer;
  position: relative;
  transition: ease all 0.2s;
  margin: 0 auto;
  width: 180px;
  position: absolute; }
  #contentBuilder .contentBuilderAddRow:hover {
    background: #2980b9; }
  #contentBuilder .contentBuilderAddRow svg {
    width: 12px;
    height: 12px; }

#dialogIconOptions #gridIcons svg {
  width: 100%;
  height: 32px; }

.icon-wrapper {
  display: inline-block; }
  .icon-wrapper svg {
    display: block; }