/* Reset */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* Visual creator styles */
body {
  font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 15px;
}

.center {
  max-width: 1200px;
  margin: 0 auto;
}

.edit-mode .position {
  display: block;
  height: auto;
  min-height: 200px;
  width: 100%;
  border: 2px dashed #0044ff;
  margin-bottom: 30px;
}

.edit-mode .position::before,
.edit-mode .position::after {
    display: table;
    content: "";
}

.edit-mode .position::after {
    clear: both;
}

.edit-mode [class^="block"] {
  background-color: #fff;
  cursor: pointer;
}

.edit-mode [class^="block"].active {
  cursor: initial;
}

.edit-mode [class^="block"] .inner {
  position: relative;
  padding: 50px 25px;
  pointer-events: none;
}

.edit-mode [class^="block"].active .inner {
  pointer-events: initial;
}

.edit-mode [class^="block"]:hover .inner,
.edit-mode [class^="block"]:focus .inner,
.edit-mode [class^="block"]:active .inner,
.edit-mode [class^="block"].active .inner {
  outline: 3px solid #ff4600;
  outline-offset: -3px;
}

.edit-mode [class^="block"].active .inner {
  cursor: initial;
}

.edit-mode [class^="block"].active .toolbox {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-color: #ff4600;
  border-radius: 10px 10px 0 0;
  transform: translateY(-100%);
  padding: 10px 6px 6px 6px;
}

.edit-mode [class^="block"].active .toolbox .tool {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 6px;
  transition: color .1s ease-in-out;
}

.edit-mode [class^="block"].active .toolbox .tool:hover,
.edit-mode [class^="block"].active .toolbox .tool:focus,
.edit-mode [class^="block"].active .toolbox .tool:active,
.edit-mode [class^="block"].active .toolbox .tool.active {
  color: rgba(255, 255, 255, 1);
  padding: 0 6px;
}

.edit-mode [class^="block"].active .handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  /* align-items: center;
  justify-content: center; */
  height: 62px;
  width: 62px;
  font-size: 32px;
  color: #fff;
  background-color: #ff4600;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 100;
}

.edit-mode [class^="block"].active .handle i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}

.edit-mode .ui-sortable-placeholder {
  min-height: 100px;
  border: 3px solid #ff4600;
}

.edit-mode [class^="block"].active [data-element]:hover,
.edit-mode [class^="block"].active [data-element]:focus,
.edit-mode [class^="block"].active [data-element]:active {
  outline: 1px solid rgba(255, 70, 0, 0.5);
  outline-offset: -1px;
}

.edit-mode [class^="block"].active [data-image]:hover,
.edit-mode [class^="block"].active [data-image]:focus,
.edit-mode [class^="block"].active [data-image]:active {
  outline: 1px solid rgba(255, 70, 0, 0.5);
  outline-offset: -1px;
  cursor: pointer;
}

.edit-mode [class^="block"].active .ui-resizable-handle {
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  height: 25px;
  width: 13px;
  background-color: transparent;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.edit-mode [class^="block"].active .ui-resizable-handle .line {
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  height: 5px;
  width: 13px;
  background-color: #ff4600;
  border-radius: 5px 0 0 5px;
  transform: translateY(-50%);
}

.edit-mode [class^="block"].active .ui-resizable-handle .line::before,
.edit-mode [class^="block"].active .ui-resizable-handle .line::after {
  content: "";
  position: absolute;
  right: 0;
  display: block;
  height: 5px;
  width: 13px;
  background-color: #ff4600;
  border-radius: 5px 0 0 5px;
}

.edit-mode [class^="block"].active .ui-resizable-handle .line::before {
  top: 8px;
}

.edit-mode [class^="block"].active .ui-resizable-handle .line::after {
  top: -8px;
}

.edit-mode [class^="block"].active .mce-edit-focus {
  outline: 1px solid rgba(255, 70, 0, 0.5);
}

.edit-mode .mce-tinymce {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.edit-mode .mce-floatpanel {
  box-shadow: none;
}

.edit-mode .mce-panel {
  background-color: #ff4600;
  border: none;
}

.edit-mode .mce-btn {
  background-color: transparent;
  border: none;
}

.edit-mode .mce-btn:hover,
.edit-mode .mce-btn:focus,
.edit-mode .mce-btn:active,
.edit-mode .mce-btn.mce-active,
.edit-mode .mce-btn.mce-active:hover,
.edit-mode .mce-btn.mce-active:focus,
.edit-mode .mce-btn.mce-active:active {
  background-color: #707070;
}

.edit-mode .mce-btn-group:not(:first-child) {
  border-left: 1px solid #fff;
}

.edit-mode .mce-splitbtn .mce-open,
.edit-mode .mce-splitbtn:hover .mce-open,
.edit-mode .mce-splitbtn .mce-open:hover,
.edit-mode .mce-splitbtn .mce-open:focus,
.edit-mode .mce-splitbtn .mce-open:active {
  border: none;
}

.edit-mode .mce-floatpanel.mce-popover {
  background-color: #ff4600;
  border: none;
  box-shadow: none;
}

.edit-mode .mce-floatpanel.mce-popover.mce-bottom .mce-arrow {
  border: none;
}

.edit-mode .mce-floatpanel.mce-popover.mce-bottom .mce-arrow:after {
  border-bottom-color: #ff4600;
}

.edit-mode .mce-stack-layout-item {
  margin: 6px 0px;
}

.edit-mode .mce-btn .mce-ico,
.edit-mode .mce-btn .mce-txt,
.edit-mode .mce-text {
  color: #fff;
}

.edit-mode .mce-caret,
.edit-mode .mce-btn:hover .mce-caret {
  border-top: 4px solid #fff;
}

.edit-mode .mce-menu-item:hover,
.edit-mode .mce-menu-item:focus,
.edit-mode .mce-menu-item:active,
.edit-mode .mce-menu-item.mce-active.mce-menu-item-normal {
  background: #707070;
}

.edit-mode .mce-menu-item:hover .mce-text,
.edit-mode .mce-menu-item:focus .mce-text,
.edit-mode .mce-menu-item:active .mce-text,
.edit-mode .mce-menu-item:hover .mce-ico,
.edit-mode .mce-menu-item:focus .mce-ico,
.edit-mode .mce-menu-item:active .mce-ico {
  color: #fff;
}

.edit-mode .image-edit {
  position: relative;
  display: block;
  height: auto;
  min-height: 150px;
  width: 100%;
  outline: 1px solid rgba(255, 70, 0, 0.5);
  outline-offset: -1px;
}

.edit-mode .image-edit [data-image] {
  opacity: 0.1;
}

.edit-mode .image-edit .dropzone {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.edit-mode .image-edit .dropzone .dz-message {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: auto;
  width: 100%;
  font-family: "poppinssemibold", sans-serif;
  font-size: 12px;
  color: #ff4600;
  padding: 30px;
  margin: 0;
  transform: translate(-50%, -50%);
}

.edit-mode .image-edit .dropzone .dz-preview {
  background-color: transparent;
}

.edit-mode .image-edit .dropzone .dz-image {
  border-radius: 0;
}