/* leave space around the main container */
body{
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 100px;
}
.loading-image {
  background-image: url(../../assets/image-loader.gif);
  background-repeat: no-repeat;
  background-position: 50%;
}
.editable-style {
  box-shadow: 0 0 2px rgba(51, 51, 51, 0.2);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: moz-none;
  -ms-user-select: none;
  user-select: none;
  cursor: move;
  min-width: 20px;
  min-height: 20px;
}
.editable-style:hover {
  box-shadow: 0 0 4px #333333;
  opacity: 1 !important;
}
.editable-style.silex-selected {
  box-shadow: 0 0 4px #333333;
  opacity: 1 !important;
}
.editable-style.silex-selected > .ui-resizable-ne {
  top: -7px;
  right: -7px;
  cursor: ne-resize;
}
.editable-style.silex-selected > .ui-resizable-sw {
  bottom: -7px;
  left: -7px;
  cursor: sw-resize;
}
.editable-style.silex-selected > .ui-resizable-se {
  bottom: -7px;
  right: -7px;
  cursor: se-resize;
}
.editable-style.silex-selected > .ui-resizable-nw {
  top: -7px;
  left: -7px;
  cursor: nw-resize;
}
/* HTML box while mous over */
/*
this makes the video clickable:
.editable-style.html-element:hover .silex-element-content {
  opacity: .5;
}
*/
.editable-style.html-element .temp-editable-cover {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
/* */
.editable-style.ui-dropzone-active {
  box-shadow: 0 0 4px #333333;
}
.editable-style.silex-selected > .ui-resizable-se,
.editable-style.silex-selected > .ui-resizable-sw,
.editable-style.silex-selected > .ui-resizable-ne,
.editable-style.silex-selected > .ui-resizable-nw {
  display: inherit;
  position: absolute;
  background-color: #333333;
  border: 1px solid #666666;
}
.ui-resizable-se,
.ui-resizable-sw,
.ui-resizable-ne,
.ui-resizable-nw {
  width: 5px !important;
  height: 5px !important;
  display: none;
}
.ui-icon-gripsmall-diagonal-se {
  background-image: none;
}
.editable-style.locked-style,
.editable-style.locked-style .editable-style,
.editable-style.background {
  cursor: pointer;
  margin-bottom: 30px;
}
.editable-style[data-silex-sub-type="image"] {
  overflow: visible;
}
.editable-style[data-silex-sub-type="image"] img {
  border-radius: inherit;
}