/*
* Copy this file into your theme to customize it.
* https://www.phpboost.com/wiki/structure-d-un-theme#paragraph-le-repertoire-theme
*/

.sortable-block {
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 100%;
}

.sortable-element {
	margin: 0 0 0.309em;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	padding: 0;
	width: 100%;
	transition: all 0.2s;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
}

.sortable-element:hover { transition: all 0.2s; }

.sortable-element > .sortable-block {
	flex: 1 1 100%;
	padding: 0 0 0 1.809em;
}

.sortable-element .sortable-element { border-width: 1px 0 1px 1px; }

.sortable-selector { padding: 0 0 0 0.309em; }

@media (min-width:769px){

	.sortable-selector {
		flex: 0 0 1.309em;
		opacity: 0.2;
		transition: opacity 0.3s;
		cursor: move;
	}

	.sortable-selector:after {
		content: "\f0b2";
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
	}
}

.sortable-element:hover .sortable-actions,
.sortable-element:hover .sortable-selector {
	opacity: 1;
	transition: opacity 0.3s;
}

.sortable-title {
	flex: 1 1 auto;
	padding: 0.618em;
	max-width: calc(100% - 5.2em);
	display: flex;
	align-items: center;
}

.sortable-title:hover { transition: all 0.2s linear; }

.sortable-block fieldset { padding: 0 1.618em; }

.sortable-block .sortable-actions a { padding: 0.618em 0.309em; }

.sortable-block .sortable-actions {
	flex: 0 1 auto;
	padding: 0.1618em;
	opacity: 0.2;
	transition: opacity 0.2s;
}

.sortable-block .sortable-element hr { margin-top: 0.309em; }

.sortable-block .sortable-actions img,
.sortable-block .sortable-element:hover label,
.sortable-block .sortable-element .fa:hover { cursor: pointer; }

.sortable-actions a { text-decoration: none;}

.dragged {
	position: absolute;
	opacity: 0.9;
	z-index: 8;
}

body.dragging,
body.dragging * { cursor: move !important; }

.dropzone {
	margin: 0.618em 0;
	padding: 0.309em;
	opacity: 0.6;
	text-align: center;
	border-width: 1px;
	border-style: dashed;
	border-color: transparent;
}

.preview img { overflow: hidden; }
