/* Auto Content Preview */

.j77content-table {
	font-size: 11px;
	margin-bottom: 0;
	color: #333;
	height: 100%;
}

.j77content-table tr:last-child {
	height: 100%;
}

.j77content-table th {
    min-width: 13%;
}

.j77content-table img {
	border: 1px solid rgba(0,0,0,0.3);
}

.j77weitere {
	float: right;
}

.j77content-table-wrapper {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.j77content-table .relation {
	display: flex;
	flex-wrap: wrap;
	margin-right: -10px;
	margin-bottom: -10px;
}

.j77content-table .relation > .j77preview-outputcontainer {	
	flex: 3 0 300px;
	margin-right: 10px;
	margin-bottom: 10px;
	background: #efefef;
	border: 1px solid #CCC;
	border-radius: 0 10px;
	overflow: hidden;
}

.j77content-table .relation>.j77preview-outputcontainer>* {
	margin: -1px;
	height: calc(100% + 2px);
	width: calc(100% + 2px);
	max-width: none;
}

.j77content-table .relation.spacer {
	margin-right: 10px;
}

.j77content-table img {
	border: none;
	margin-right: 5px;
}

.j77content-table .file {
	float: left;
	padding-right: 10px;
	text-align: center;
}

.j77content-table .file img {
	border: none;
}

.j77content-table .file svg {
	width: 20px;
	height: 20px;
}

.j77preview-outputcontainer .infocell {
	text-align: right;
	color: #6c6c6c;
	margin: 0;
	font-size: 0.8em;
}

.j77content-table td, .j77content-table > tbody > tr > td {
	width: 100%;
	vertical-align: top;
}

.j77content-table th, .j77content-table.table>tbody>tr>th {
	vertical-align: top;
}

.t3-page-ce-body-inner {
	position: relative;
	overflow: hidden;
}

.j77contenticonbg {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 150px;
	height: 150px;
	opacity: 0.025;
	pointer-events: none;
	max-width: 50%;
	max-height: 75%;
	text-align: right;
}

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

/* Image Preview */
.j77content-preview-withimage {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	height: 100%;
}

.j77content-preview-withimage-count {
	margin: auto 0;
    font-weight: bold;
}

.j77content-preview-withimage .j77preview-tablecontainer table, .table.table-striped.table-sm.j77content-table {
	margin-bottom: 5px;
}

.j77content-preview-withimage .j77preview-image.j77preview-image.j77preview-image.j77preview-image.j77preview-image {
	flex: 0 0 95px;
}

.j77content-preview-withimage .j77preview-tablecontainer {
	flex: 3 0 calc(100% - 95px);	
}

.j77content-preview-withimage .j77preview-image.j77preview-image.j77preview-image.j77preview-image.j77preview-image figure {
	border: 1px solid #ccc;
	margin-right: -1px;
	margin-bottom: -1px;	
}

.j77content-preview-withimage .j77preview-image.j77preview-image.j77preview-image.j77preview-image.j77preview-image figure .icon-spin {
	margin: 30px auto;
	display: block;
}

.j77content-preview-withimage .j77preview-image.j77preview-image.j77preview-image.j77preview-image.j77preview-image figure .icon-spin svg {
	left: auto;
	margin: auto;
	top: auto;
	width: 100%;
	height: 100%;
}

.j77content-preview-withimage .j77preview-image.j77preview-image.j77preview-image.j77preview-image.j77preview-image img:not(.loaded) {
	display: none;
}

.j77content-preview-withimage .j77preview-image.j77preview-image.j77preview-image.j77preview-image.j77preview-image img.loaded + .icon-spin {
	display: none;
}


.j77content-preview-withimage .j77preview-image.j77preview-image.j77preview-image.j77preview-image.j77preview-image img {
	width: 100%;
	position: static;
	left: 0;
	top: 0;
	margin: 0;
	height: auto;
}



.j77content-table-rch .fa-stack{
	margin-top: -4px;
	margin-bottom: -5px;
	cursor: default;
}

.j77content-table-rch .device {
	font-size: 1.2em;
}


.j77content-table-rch .fa-stack .fa-ban{
	top: -1px;
	pointer-events: none;
}

/* Dataflow */

.j77content-table-dataflow.j77content-table-dataflow.j77content-table-dataflow.j77content-table-dataflow {
	border: 1px solid rgba(109 170 224 / .6);
}

.j77content-table-dataflow.j77content-table-dataflow.j77content-table-dataflow.j77content-table-dataflow > tbody td,
.j77content-table-dataflow.j77content-table-dataflow.j77content-table-dataflow.j77content-table-dataflow > tbody th {
	border: none;
}

.j77content-table-dataflow.j77content-table-dataflow.j77content-table-dataflow.j77content-table-dataflow > tbody > tr {
	background-color: rgba(109 170 224 / .1);
}

.j77content-table .badge {
	border-radius: 10%;
}

.j77content-table .badge i.fa{
	text-shadow: 0px 1px black, 2px 1px black;
}

.j77content-table .badge i.fa.fa-rotate-180{
	text-shadow: 0px -1px black, -2px -1px black;
}

.j77content-table-dataflow .relation {
	float: none;
	display: inline-block;
    margin-right: .5em;
}

.j77preview-outputcontainer img,
.j77preview-outputcontainer svg,
.j77preview-outputcontainer .icon-color
 {
	border: none;    
    height: 1em;
    top: -.1em;
    position: relative;
	margin: 0;
	left: -.2em;
	margin-right: -.2em;
}
.j77preview-outputcontainer  svg,
.j77preview-outputcontainer .icon-color.icon-color {
	width: 1.3em;
    top: .1em;
	transform: scale(1);
}

.exampleContent > table.j77content-table + .j77preview-outputcontainer {
	margin-top: 10px;
}

.j77contenttitle .title-editicon {
	display: none;
}

.j77contenttitle:hover {
	text-decoration: underline;
}

.j77contenttitle:hover .title-editicon {
	display: inline;
}

.j77contenttitle .title-editicon svg {
	height: 1em;
    display: inline;
    width: 1em;
    top: 0.2em;
    position: relative;
}

/* Contentfooter */
.t3-page-ce .t3-page-ce-footer.t3-page-ce-footer {
	padding: 5px;
}

.t3-page-ce .t3-page-ce-footer {
	border-top: 1px solid #DDD;
}

.t3-page-ce .t3-page-ce-footer > .t3-page-ce-info > .t3-page-ce-footer {
	border-top: none;
}