/* cursor-hand
------------------------ */
.cursor-open-hand{
	cursor: pointer;
	cursor: url(/img/cursors/openhand.cur) 4 4, move;
}

.cursor-open-hand:active{
	cursor: pointer;
	cursor: url(/img/cursors/closedhand.cur) 4 4, move;
}

.cursor-closed-hand{
	cursor: pointer;
	cursor: url(/img/cursors/closedhand.cur) 4 4, move;
}


/* draggable-handle
------------------------ */

.snippet-draggable-simplehandle {
	position: absolute;
	left: 4px;
	top: 4px;
	bottom: 4px;
	width: 22px;
	overflow: hidden;
	color: transparent;
	background: url(/img/drag-pagina.png) 8px 2px repeat-y #fff;
	border: none;
	z-index: 3;
}


.snippet-draggable-handle,
.ui-draggable-handle{
  cursor: pointer;
  cursor: url(/img/cursors/openhand.cur) 4 4, move;	
}

.dragging .snippet-draggable-handle,
.snippet-draggable-handle:active,
.ui-draggable-handle:active{
	cursor: url(/img/cursors/closedhand.cur) 4 4, move;		
}


/* snippet-container
--------------------- */

.snippet-container{
	position: relative;
	transition: transform .2s;
}




.snippet-sortable.drop-to-me{
	outline: 1px dashed #8FB4EF;
}
.snippet-sortable.snippet-receptor.drop-to-me{
  /*outline-width: 3px;*/
}

.snippet-sortable.drop-to-me .snippet-toolbar-description {
  left: 0;
  overflow: hidden;
  max-width: 100%;
}

.snippet-sortable.drop-to-me .snippet-toolbar {
  right: 0;
  left: 0;
  position: absolute;
}




.snippet-container-content{
	border: 1px dashed transparent;
	overflow: visible;
}

.snippet-container.snippet-indicated > .snippet-container-content{
	border-color: rgba(183, 183, 183, 0.8);
}

.snippet-container.snippet-indicated.snippet-leaf > .snippet-container-content{
	border-color: rgba(183, 183, 183, 0.2);
}

.snippet-container-content.snippet-leaf{
	overflow: hidden; /* no es contenedor, puede ocultar lo que sobresalga */
	position: relative;
	
	transition: opacity .2s;
}

.snippet-more-space{
	padding: 10px;
}

.dragging .snippet-container-content.snippet-leaf{
	opacity: .9;
}


/* snippet-toolbar
-------------------- */
.snippet-toolbar {
	position: absolute;
	z-index: 2;
	margin-left: 0px;
	left: 1px;
	top: 1px;
	background-color: #fff;
	box-shadow: 0px 0px 6px rgba(0,0,0,.5);
	border-top: none;
	border-left: none;
	text-align: left;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

/*
.snippet-toolbar.pull-right{
	left: auto;
	right: 0px;
}
*/

.snippet-toolbar .navbar{
	margin-bottom: 0;
	margin-top: 0px;
	background-color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.snippet-toolbar .navbar .nav{
	margin: 0;
}

.snippet-toolbar .navbar-inner {
	background: #fff;
	box-shadow: none;
	border: none;
	border-radius: 0;
	margin: 0;
	box-sizing: border-box;
	padding: 4px;
	min-height: 0;
	padding-left: 29px;
	white-space: nowrap;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.snippet-toolbar .btn {
	background-image: none;
	border-color: rgba(0,0,0,.1);
	box-shadow: none;
}

.snippet-toolbar .btn-group {
	margin: 0;
}

.snippet-toolbar .btn-group > .btn {
	float: none;
}

.snippet-toolbar-description {
  background: transparent;
  position: absolute;
  margin-top: -17px;
  border-radius: 0;
  padding: 2px 4px;
  text-transform: uppercase;
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  z-index: 1;
  line-height: 13px;
  margin-left: -2px;
  white-space: nowrap;
  border-bottom: none;
  box-sizing: border-box;
  left: 1px;
  /* min-width: calc(100% - 25px); */
  border-radius: 4px 4px 0 0;
  font-size: 10px;
}

.snippet-contenedor > .snippet-toolbar > .snippet-toolbar-description,
.snippet-contenedor > .snippet-toolbar > .navbar > .snippet-toolbar-description{
	/*background-color: #70CF57 !important;*/
}

/* SNIPPET PLACEHOLDER
----------------------- */
.snippet-placeholder{
	padding: 20px 10px;
	text-align: center;
	background: #eee;
	text-transform: uppercase;
	color: #999;
}


/* SORTABLE
----------------------------------------------------------------------------- */

.snippet-sortable {
	position: relative;
	
	height:100%;
}

/* FLEXBOX
--------------- */
.snippet-sortable-content {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	align-content: flex-start;
	padding: 10px;
	
	transition: padding .5s;
	
	height: 100%;
}

.snippet-sortable.content-empty > .snippet-sortable-content{
	padding-bottom: 200px;	
}


.snippet-sortable-content > * {
	flex-basis: 100%;
	margin: 5px;
	box-sizing: border-box;

    min-width: 0px; 	/* fix para que las imagenes puedan tener un ancho máximo en flexbox, por ahora solo afecta a firefox pero en el futuro puede afectar a más navegadores */
}

.snippet-sortable-content > .inline-block {
	/*flex: auto;*/
	flex-basis: auto;
	align-self: baseline;
}

/* sortable-dummy
---------------------- */
.sortable-dummy{
	background: rgba(0,0,0,.1);
}

.sortable-dummy.inline-block {
  align-self: stretch;
}

/* sortable-helper
--------------------------- */

.ui-sortable-helper {
  background: #eee;
}

.snippet-container.snippet-draggable.ui-sortable-helper{
	transform: scale(.3);
	transform-origin: 0 0;
}

/* sortable-placeholder
----------------------- */

.snippet-sortable-placeholder {
	position: relative;
	z-index: 10000;
	overflow: visible;
	border: none;
	height: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	display: block;
	top: 0px;

	display: block;
	float: none;
	clear: both;


	flex: 0;
	width: 0;
}

.snippet-sortable-placeholder {
	/*transform: translate(5px,5px);*/
}

.snippet-sortable-placeholder:first-child {
	/*transform: translateY(-8px);*/
}

.snippet-sortable-placeholder:last-child{
	/*margin-bottom: -15px;*/
}




.snippet-sortable-placeholder-content {
	position: absolute;
	height: 4px;
	background: #22aae4;
	top: 0;
	display: block;
	width: 100%;

}

.snippet-sortable-placeholder-content:after,
.snippet-sortable-placeholder:before{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	right: 0px;
	top: -3px;
	border: 5px solid transparent;
}

.snippet-sortable-placeholder-content:after{
	border-right-color: #22aae4;
	border-left: none;	
}


.snippet-sortable-placeholder:before {
	border-left-color: #22aae4;
	border-right: none;
	left: 0;
}




.snippet-sortable-placeholder-horizontal{
	flex: 100%;
	/*transform: translate(0px,-1px);*/
}

.snippet-sortable-placeholder-vertical{
	flex: 0;
	/*transform: translate(-1px,5px);*/
	align-self: flex-start;
}

.snippet-sortable-placeholder-inline,
.snippet-sortable-placeholder-float{
	width: 0px;
	height: 0px;
	margin: 0;
	display: inline-block;
	/* transform: rotate(90deg) translateX(5px) translateY(6px); */
	transform-origin: center center;
	vertical-align: top;


}



.snippet-sortable-placeholder-vertical:before,
.snippet-sortable-placeholder-inline:before,
.snippet-sortable-placeholder-float:before {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	left: -4px;
	top: 0px;
	border: 5px solid transparent;
	border-top-color: red;
	border-bottom: none;
}


.snippet-sortable-placeholder-vertical .snippet-sortable-placeholder-content,
.snippet-sortable-placeholder-inline .snippet-sortable-placeholder-content,
.snippet-sortable-placeholder-float .snippet-sortable-placeholder-content {
	height: 80px;
	display: block;
	width: 2px;
	margin-left: 0px;
	margin-top: 0;
}

.snippet-sortable-placeholder-vertical .snippet-sortable-placeholder-content:after,
.snippet-sortable-placeholder-inline .snippet-sortable-placeholder-content:after,
.snippet-sortable-placeholder-float .snippet-sortable-placeholder-content:after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	/*right: -5px;
	top: -4px;*/
	bottom: 0px;
	top: auto;
	left: -4px;
	border: 5px solid transparent;
	border-bottom-color: red;
	border-top: none;
}



.snippet-sortable-placeholder-float{
	display: block;
	float: left;
	clear: none;	
}


.snippet-sortable-placeholder-animated{
	-webkit-animation-name: animate-pulse;
    animation-name: animate-pulse;
	  -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
		  
		  transform: translateY(-2px);

}

.snippet-sortable-placeholder-animated,
.snippet-sortable-placeholder-animated > *{
	transition: top .15s, left .15s, width .05s;
}

.snippet-sortable-placeholder-rotated{
	transform: rotate(90deg) translateY(-2px);
}


@-webkit-keyframes animate-pulse {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: .3;
  }
}

@keyframes animate-pulse {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}



/* snippet-overlay
-------------------------- */
.snippet-overlay{
	overflow: hidden;
	z-index: 1;

	transition: .3s all;
}

.snippet-container.snippet-fullscreen > .snippet-overlay{
	opacity: 0;
}

.snippet-overlay,
.snippet-overlay-background,
.snippet-overlay-content{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.snippet-overlay-background{
	background: rgba(255,255,255,.5);
	transition: all .3s;
}

.snippet-overlay-content{
	opacity: .5;
	font-size: 40px;
	transition: all .3s;
}


.snippet-container:hover > .snippet-overlay .snippet-overlay-background,
.snippet-container:hover > .snippet-overlay .snippet-overlay-content{
	opacity: .1;
}

.snippet-overlay-content-inner{
	position: absolute;;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.snippet-overlay-content-inner .snippet-responsive-devices{
	margin: 0;
}



/* --------- SNIPPET INFO ---------- */

.snippet-info{
	position: absolute;
	background: rgba(0,0,0,.2);
	color: #fff;
	padding: 0 5px;
	right: 0;
	bottom: 0;
	z-index: 1;
}


.snippet-cannot-receive-dragged-item {
	background: url(/img/snippets/bg-controles-snippets.png) repeat;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 1;
	opacity: .8;
}
/* ------------- SNIPPETS ----------------- */

/* CONTENEDOR
----------------------- */
[data-snippet="contenedor"]{
	position: relative;
}

/* CAJA
-------------------------- */
.snippet-tipo-caja .margin-info{
	position: absolute; 
	font-size:9px; 
	text-align: center;	
	z-index: 1;
	
	
	padding: 4px;
	border: 0;
	line-height: 9px;
	
	border-radius: 2px;

}

.snippet-tipo-caja .margin-info-warning{
	color: #fff;
	background: #773C1C;
}

.snippet-tipo-caja .margin-info-top,
.snippet-tipo-caja .margin-info-bottom{
	left: 50%;
	transform: translateX(-50%);
}

.snippet-tipo-caja .margin-info-top{
	top: -10px;
}

.snippet-tipo-caja .margin-info-bottom{
	bottom: -10px;
}

.snippet-tipo-caja .margin-info-right,
.snippet-tipo-caja .margin-info-left{
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
}
	
.snippet-tipo-caja .margin-info-right{
	left: auto;
	right: -18px;
	transform: translateY(-50%) rotate(90deg);
}

.snippet-tipo-caja .margin-info-left{
	right: auto;
	left: -18px;
}

/* IFRAME
---------------------- */
.snippet-tipo-iframe .snippet-container-content {
  min-height: 40px;
}


/* COLUMNA RESIZABLE
------------------------ */

[data-snippet="fila"] > .row-fluid.group-resizing > .row-col {
	-webkit-transition: width .2s;
	-moz-transition: width .2s;
	-ms-transition: width .2s;
	transition: width .2s;
}

[data-snippet="fila"] .ui-resizable-handle{
	width: 8%;
	right: inherit;
	left: 100%;
}

[data-snippet="fila"] .ui-resizable-handle:hover{
	background: rgba(0,0,0,.1);
}
[data-snippet="fila"] .ui-resizable-handle-indicators {
	position: absolute;
	top: 50%;
	left: 100%;
	width: 8%;
	opacity: .5;
	margin-top: -5px;
	color: initial;
}

[data-snippet="fila"] .ui-resizable-handle-indicators .icon-caret-left {
	position: absolute;
	left: -10px;
}

[data-snippet="fila"] .ui-resizable-handle-indicators .mdi-menu-left {
	position: absolute;
	left: -20px;
}

[data-snippet="fila"] .ui-resizable-handle-indicators .icon-caret-right {
	position: absolute;
	right: -10px;
}

[data-snippet="fila"] .ui-resizable-handle-indicators .mdi-menu-right {
	position: absolute;
	right: -20px;
}

.no-gutters > .row-col > .ui-resizable-e,
.no-gutters > .row-col > .ui-resizable-handle-indicators {
  transform: translateX(-50%);
}



/* snippet-galeria
----------------- */
[data-snippet="snippet-galeria-modal"] {
	padding: 0px;
}
[data-snippet="snippet-galeria-modal"][data-no-gutters="true"] {
	padding: 5px;
}


[data-snippet="snippet-galeria-modal"] .snippet-container {
	width: 33%;
	margin: 0;
}


[data-snippet="snippet-galeria-modal"][data-items-por-fila="1"] .snippet-container {
	width: 100%;
}

[data-snippet="snippet-galeria-modal"][data-items-por-fila="2"] .snippet-container {
	width: 50%;
}

[data-snippet="snippet-galeria-modal"][data-items-por-fila="3"] .snippet-container {
	width: 33.33%;
}

[data-snippet="snippet-galeria-modal"][data-items-por-fila="4"] .snippet-container {
	width: 25%;
}

[data-snippet="snippet-galeria-modal"][data-items-por-fila="6"] .snippet-container {
	width: 16.66%;
}

[data-snippet="snippet-galeria-modal"][data-items-por-fila="12"] .snippet-container {
	width: 8.33%;
}



.snippet-tipo-galeria [data-snippet="imagen"] {
	height: 0;
	overflow: hidden;
	position: relative;
	padding: 50% 0;
}

.snippet-tipo-galeria .snippet-container.snippet-tipo-imagen{
	padding: 5px;
}

[data-snippet="snippet-galeria-modal"][data-no-gutters="true"] .snippet-container.snippet-tipo-imagen{
	padding: 0;
}


[data-snippet="sliderModal"] .snippet-sortable-content {
  padding: 0;
  
}

/* snippet separador
------------------------ */
[data-snippet="separador"] {
  height: 40px;
  background-color: rgba(255, 255, 255, 0.3);
}

/* snippet divisor
------------------------ */
[data-snippet="divisor"] {
	margin: 17px 0;
}

[data-snippet="divisor"] hr {
	border-top-color: #ddd;
	border-top-width: 4px;
}


/* snippets de texto
-------------------------- */
[data-snippet="parrafo"] *,
[data-snippet="titulo"] *,
[data-snippet="subtitulo"] *,
[data-snippet="textoenriquecido"] *
{
	margin: 0;
	padding: 0;	
}



/* snippet empty description
-------------------------------- */
.snippet-empty-description {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden;
	opacity: .3;
	line-height: 14px;
	padding: 8px;
	text-transform: uppercase;
	pointer-events: none;
}


/* COLORES
--------------------- */

.snippet-container.snippet-iluminado{
	z-index: 99999; 
}


.snippet-container.snippet-iluminado > .snippet-container-content{
	border-style: solid;
	border-color: rgba(128,128,128,1);
	box-shadow: 0 0 0 5px rgba(128,128,128,.3);
}


.snippet-toolbar > .snippet-toolbar-description {
	background-color: rgba(128,128,128,1);
}


/* CONTENEDOR */
.snippet-container.snippet-contenedor.snippet-iluminado > .snippet-container-content{
	border-color: rgba(112, 207, 87, 1);
	box-shadow: 0 0 0 5px rgba(112, 207, 87, .3), 0 0 0 10px rgba(112, 207, 87, .1) inset;
}

.snippet-contenedor > .snippet-toolbar > .snippet-toolbar-description,
.snippet-contenedor > .snippet-toolbar{
	background-color: rgba(112, 207, 87, 1);
}

/* FILA / COLUMNA */
.snippet-container.snippet-tipo-fila.snippet-iluminado > .snippet-container-content,
.snippet-container.snippet-tipo-columna.snippet-iluminado > .snippet-container-content{
	border-color: rgba(112, 207, 87, 1);
	box-shadow: 0 0 0 5px rgba(112, 207, 87, .3), 0 0 0 10px rgba(112, 207, 87, .1) inset;
}

.snippet-tipo-fila > .snippet-toolbar > .snippet-toolbar-description,
.snippet-tipo-fila > .snippet-toolbar,
.snippet-tipo-columna > .snippet-toolbar > .snippet-toolbar-description,
.snippet-tipo-columna > .snippet-toolbar{
	background-color: rgba(112, 207, 87, 1);
}

.drop-to-me.snippet-tipo-columna{
	outline-color: rgba(112, 207, 87, 1);
}


/* CAROUSEL */
.snippet-container.snippet-tipo-carousel.snippet-iluminado > .snippet-container-content,
.snippet-container.snippet-tipo-carouselSlide.snippet-iluminado > .snippet-container-content{
	border-color: rgba(176, 26, 246, 1);
	box-shadow: 0 0 0 5px rgba(176, 26, 246, .3), 0 0 0 10px rgba(176, 26, 246, 0.1) inset;
}

.snippet-tipo-carousel > .snippet-toolbar > .snippet-toolbar-description,
.snippet-tipo-carousel > .snippet-toolbar,
.snippet-tipo-carouselSlide > .snippet-toolbar > .snippet-toolbar-description,
.snippet-tipo-carouselSlide > .snippet-toolbar{
	background-color: rgba(176, 26, 246, 1);
}

.drop-to-me.snippet-tipo-carouselSlide{
	outline-color: rgba(176, 26, 246, 1);
}


/* CAJA */
.snippet-container.snippet-tipo-caja.snippet-iluminado > .snippet-container-content{
	border-color: rgba(173, 87, 41, 1);
	box-shadow: 0 0 0 5px rgba(173, 87, 41, .3), 0 0 0 10px rgba(173, 87, 41, 0.1) inset;
}

.snippet-tipo-caja > .snippet-toolbar > .snippet-toolbar-description,
.snippet-tipo-caja > .snippet-toolbar{
	background-color: rgba(173, 87, 41, 1);
}

.drop-to-me.snippet-tipo-caja{
	outline-color:  rgba(173, 87, 41, 1);
}



/* GALERIA */
.snippet-container.snippet-tipo-galeria.snippet-iluminado > .snippet-container-content{
	border-color: rgba(230, 157, 0, 1);
	box-shadow: 0 0 0 5px rgba(230, 157, 0, .3), 0 0 0 10px rgba(230, 157, 0, 0.1) inset;
}

.snippet-tipo-galeria > .snippet-toolbar > .snippet-toolbar-description,
.snippet-tipo-galeria > .snippet-toolbar{
	background-color: rgba(230, 157, 0, 1);
}

.drop-to-me.snippet-tipo-galeria{
	outline-color: rgba(230, 157, 0, 1);
}


/* FORMULARIO */
.snippet-container.snippet-tipo-formulario.snippet-iluminado > .snippet-container-content{
	border-color: rgba(231, 72, 155, 1);
	box-shadow: 0 0 0 5px rgba(231, 72, 155, .3), 0 0 0 10px rgba(231, 72, 155, 0.1) inset;
}

.snippet-tipo-formulario > .snippet-toolbar > .snippet-toolbar-description,
.snippet-tipo-formulario > .snippet-toolbar{
	background-color: rgba(231, 72, 155, 1);
}

.drop-to-me.snippet-tipo-formulario{
	outline-color: rgba(231, 72, 155, 1);
}


/*

.snippet-leaf.background-color{
	background-color: #999;
}

.snippet-contenedor.background-color{
	background-color: #70CF57;
}

.snippet-tipo-carousel.background-color{
	background-color: #b01af6;
}




.snippet-leaf.border-color{
	border-color: #999;
}

.snippet-contenedor.border-color{
	border-color: #70CF57;
}

.snippet-tipo-carousel.border-color{
	border-color: #b01af6;
}
*/




/* ----------- VENTANAS DE EDICIÓN ---------- */
.preview-columnas > [class*="span"] {
  border: 3px solid #22AAE4;
  line-height: 50px;
  text-align: center;
  padding: 5px;
  background-color: rgba(34, 170, 228, 0.1);
}



/* PREVIEW IMAGE */
#ventana-editar-snippet .preview-image-grid {
	height: 1px;
	padding: 25% 0;
	overflow: hidden;
	position: relative;
	border: 3px solid #22AAE4;
	background-color: rgba(34, 170, 228, 0.1);
}

#ventana-editar-snippet .preview-image-grid .caption {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: rgba(0,0,0,0.7);
}

#ventana-editar-snippet .preview-image-grid .caption h4{
	padding: 10px;
	color: #fff;
	margin: 0;
}



/* MODAL */
/*
.modal-body{
	max-height: calc(100vh - 138px);
}

.modal.fade.in{
	top: 30%;
	-webkit-transform: translateY(-29%) translate3d(0,0,0);
	-moz-transform: translateY(-29%) translate3d(0,0,0);
	-ms-transform: translateY(-29%) translate3d(0,0,0);
	-o-transform: translateY(-29%) translate3d(0,0,0);
	transform: translateY(-29%) translate3d(0,0,0);
}

@media (max-width: 767px), (max-height:500px) {
	.modal.fade.in{
		top: 50%;
		-webkit-transform: translateY(0%) translate3d(0,0,0);
		-moz-transform: translateY(0%) translate3d(0,0,0);
		-ms-transform: translateY(0%) translate3d(0,0,0);
		-o-transform: translateY(0%) translate3d(0,0,0);
		transform: translateY(0%) translate3d(0,0,0);
	}
}*/

.card-side > div > .snippet-tipo-contenedor > .snippet-toolbar > .snippet-toolbar-description,
.card-side > div > .snippet-tipo-contenedor > .snippet-toolbar {
	background-color: #e0c308;
}

.card-side-1 > div > .snippet-tipo-contenedor > .snippet-toolbar > .snippet-toolbar-description,
.card-side-1 > div > .snippet-tipo-contenedor > .snippet-toolbar {
	background-color: #b19a08;
}


[data-widget="card"]{

}

[data-widget="card"] .card-side {
/*
	border: 1px solid #eee;
	margin: 10px;
	*/
}



/* VIDEO
-------------- */
[data-widget="video"] img {
	width: 100% !important;
}