@charset "utf-8";

.row[data-action='objects'] > div > div > div.row > div.col > div.card{
	height: auto;
	min-height: 100%;
}

.row[data-action='objects'] .pagination{margin-top: 50px;}
.row[data-action='objects'] > div > div > div:last-child > .pagination{margin-top: 20px;}


/************************************************************************************
 *	Navigation																		*
 ***********************************************************************************/

.row[data-action='objects'] > div > .nav-tabs li{
	padding-left: 10px;
}

.row[data-action='objects'] > div > .nav-tabs > li > a{
	background-color: rgba(0,0,0,.03);
	background-color: #eee;
	border: 1px solid rgba(0,0,0,.125);
	border-bottom: none;
	color: #212529;
	color: #777;
	cursor: pointer;
	font-weight: bold;
	/*box-shadow: inset 0 3px 7px rgba(0,0,0,.15);*/
}

.row[data-action='objects'] > div > .nav-tabs > li > a > .fa-close:hover{
	cursor: pointer;
	color: red;
}

.row[data-action='objects'] > div > .nav-tabs > li:first-child > a > .fa{width: 15px;}
.row[data-action='objects'] > div > .nav-tabs > li:first-child > a.active > .fa-folder{display: none;}
.row[data-action='objects'] > div > .nav-tabs > li:first-child > a:not(.active) > .fa-folder-open{display: none;}

.row[data-action='objects'] > div > .nav-tabs > li:first-child > a,
.row[data-action='objects'] > div > .nav-tabs > li:first-child > a.active{
	background-color: #aaa;
	background-color: #888;
	color: #fff;	
}

.row[data-action='objects'] > div > .nav-tabs > li > a.active{
	background-color: #ccc;
	background-color: #ddd;
	/*color: #212529;*/
}

.row[data-action='objects'] > div > .nav-tabs > li > a.active:hover{
	cursor: default;
}

.row[data-action='objects'] > div > .nav-tabs .dropdown{
	margin-bottom: 0px;
	z-index: 3;
}

.row[data-action='objects'] > div > .nav-tabs .dropdown > span{
	width: auto;
}

.row[data-action='objects'] > div > .nav-tabs .dropdown > ul{
	max-height: 200px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.row[data-action='objects'] .dropdown.view > span,
.row[data-action='objects'] .dropdown.view > ul{
	text-align: left;
}

.row[data-action='objects'] .dropdown.view > ul{
	width: 118px;
	text-align: left;
}

.row[data-action='objects'] .dropdown.view li.selected{
	display: none;
}


/************************************************************************************
 *	Filter																			*
 ***********************************************************************************/

.row[data-action='objects'] .wrapper-filter .input-group{
	margin-bottom: 10px;
}

.row[data-action='objects'] .wrapper-filter .input-group .input-group-addon{
	width: 100px;
}

.row[data-action='objects'] .wrapper-filter .input-group > div{
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	margin-bottom: 0;
}

.row[data-action='objects'] > div > .nav-tabs + div{
	margin-top: 20px;
}

.row[data-action='objects'] .card-header > i.fa-remove,
.row[data-action='objects'] .input-group > i.fa-remove{
	position: absolute;
	right: 11px;
	top: 10px;
	z-index: 2;
	cursor: pointer;
}

.row[data-action='objects'] .input-group > i.fa-remove{
	top: 8px;
}

.row[data-action='objects'] i.fa-remove:hover{
	color: red;
}

.row[data-action='objects'] .input-group [type='text']{
	height: 31px;
	border-color: silver;
	border-radius: 4px;
}

.row[data-action='objects'] .panel-heading > i.fa-remove{
	right: 24px;
}

.row[data-action='objects'] .panel-heading > i.fa-remove:hover,
.row[data-action='objects'] .input-group > i.fa-remove:hover{
	cursor: pointer;
	color: red;
}


/************************************************************************************
 *	Sortierung																		*
 ***********************************************************************************/
 
.row[data-action='objects'] .btn-sort-group{
	margin-bottom: 0px;
}

.row[data-action='objects'] .btn-sort-group li{
	padding: 5px 5px;
}

.row[data-action='objects'] .btn-sort-group li .badge{
	background-color: transparent;
	padding: 3px 5px;
}

.row[data-action='objects'] .btn-sort-group li .badge i{
	cursor: pointer;
	font-size: 14px;
	color: blue;
}

.row[data-action='objects'] .btn-sort .fa-square-o,
.row[data-action='objects'] .btn-sort .fa-check-square{
	cursor: pointer;
}

.row[data-action='objects'] .btn-sort .fa-check-square{
	color: DodgerBlue;
}

.row[data-action='objects'] .btn-sort .fa-square-o + span{
	margin-left: 1px;
	color: silver;
}

.row[data-action='objects'] .btn-sort .fa-check-square-o + span{
	color: #000;
}
 
.row[data-action='objects'] .btn-sort-group{
	margin-bottom: 0px;
}

.row[data-action='objects'] .btn-sort .fa-arrows{
	float: right;
	margin-top: 4px;
	margin-right: 1px;
	cursor: move;
}


/************************************************************************************
 *	Ansicht																			*
 ***********************************************************************************/

.row[data-action='objects'] #slide-ojbects-all-down i,
.row[data-action='objects'] #slide-ojbects-all-down i{
	cursor: pointer;
 	color: blue;
 	font-size: 14px;
}

.up-down-switch{
	width: 270px;
	float: left;
}

.up-down-switch > div{
	float: left;
	padding: 5px 11px;
	border: 1px solid silver;
	border-radius: 4px;
	cursor: pointer;
}

.up-down-switch > div:first-child{
	margin-right: 10px;
	margin-left: 16px;
}

.up-down-switch > div:hover{
	cursor: pointer;
	background: #eee;
}

.up-down-switch > div:hover i{
	color: blue;
}


/************************************************************************************
 *	Compact-Container																*
 ***********************************************************************************/
 
div.object-container-compact > .card > .card-header{
	height: 33px;
}

div.object-container-compact > .card > .card-header > span:first-child > i,
div.object-container-compact > .card > .card-header > i{
	cursor: pointer;
}

div.object-container-compact{
	margin-top: 20px;
}

div.object-container-compact > .card > .card-header > .card-title > i{
	border: 1px solid silver;
	margin-right: 10px;
}

div.object-container-compact > .card > .card-body{
	height: 0px;
	padding: 0px;
	overflow: hidden;
}

div.object-container-compact > .card.open > .card-body{
	height: auto;
	padding: 1.25rem;
}

div.object-container-compact[data-state='deleted'] > .card > .card-header > .fa-trash{display: none;}
div.object-container-compact[data-state='deleted'] > .card > .card-header > .fa-pencil{display: none;}
div.object-container-compact:not([data-state='deleted']) > .card > .card-header > .fa-undo{display: none;}
div.object-container-compact:not([data-state='deleted']) > .card > .card-header > .fa-close{display: none;}

div.object-container-compact > .card.open > .card-body table tr:first-child th,
div.object-container-compact > .card.open > .card-body table tr:first-child td{
	border-top: none;
}

div.object-container-compact > .card.open > .card-body table th{
	white-space: nowrap;
	width: 200px;
}

div.object-container-compact > .card > .card-footer i.fa-object-group{margin-left: 2px;}

div.object-container-compact > .card > .card-footer{
	color: #999;
}

div.object-container-compact > .card > .card-footer > span:not(.object-lang){
	float: left;
	white-space: no-wrap;
	margin-right: 20px;
	width: 300px;
}

div.object-container-compact > .card > .card-footer > .object-type{width: 300px;}
div.object-container-compact > .card > .card-footer > .object-counter{width: 100px;}
div.object-container-compact > .card > .card-footer > .object-created{width: 110px;}
div.object-container-compact > .card > .card-footer > .object-updated{width: 110px;}
div.object-container-compact > .card > .card-footer > .object-pub-time{width: 200px;}

div.object-container-compact > .card > .card-footer i{
	margin-right: 10px;
}


/************************************************************************************
 *	Voller Container																*
 ***********************************************************************************/

.object-container-full .card-header > div > span[data-lang]{
    position: relative;
    float: left;
    margin-left: 24px;
    cursor: pointer;
    font-weight: normal;
}

.object-container-full .fa-close{
	color: red;
}

.object-container-full .card-title i{
	cursor: pointer;
}

.object-container-full .card-header > div{
	float: right;
}

.object-container-full .card-header > div > span{
	position: relative;
	float: left;
	margin-left: 24px;
	cursor: pointer;
}

.object-container-full .card-header > div > span[data-lang='de']{
	cursor: not-allowed;
}

.object-container-full .card-header > div > span::before{
	font-family: "fontawesome";
	content: "\f096";	 
	position: absolute;
	color: green;
	left: -14px;
	top: 0px;
}

.object-container-full .card-header > div > span.checked::before{
	content: "\f14a";
}

.object-container-full .card-title{
	margin-bottom: 0px;
}

.object-container-full .card-body{
	-webkit-transition: height .5s linear;
	-moz-transition: height .5s linear;
	-o-transition: height .5s linear;
	transition: height .5s linear;
	
	overflow: hidden;
}

.object-container-full .card.closed .card-header{
	border-bottom: none;
}

.object-container-full .card.closed .card-body{
	height: 0px;
	padding: 0px;
	border: none;
}

.object-container-full .pub-state-wrapper [type='checkbox'] + label,
.object-container-full .pub-state-wrapper [type='checkbox'] + label + label{
	cursor: pointer;
	width: auto !important;
	white-space: nowrap;
	z-index: 1;
}

.object-container-full .pub-state-wrapper [type='checkbox'] + label + label{
	clear: none;
}

.object-container-full .pub-state-wrapper [type='checkbox'] + label::before,
.object-container-full .pub-state-wrapper [type='checkbox'] + label + label::before{
	font-family: fontawesome;
	margin-left: -20px;
	display: inline-block;
	width: 20px;
	padding: 0px;
	z-index: 1;
}

.object-container-full .pub-state-wrapper [type='checkbox'] + label::before,
.object-container-full .pub-state-wrapper [type='checkbox'] + label + label::before{
	content: "\f10c";
	color: red;
}

.object-container-full .pub-state-wrapper [type='checkbox']:checked + label::before,
.object-container-full .pub-state-wrapper [type='checkbox']:checked + label + label::before{
	content: "\f05d";
	color: green;
}

.object-container-full .pub-state:not(:checked) + label + label{display: none;}
.object-container-full .pub-state:checked + label{display: none;}

.object-container-full .pub-start:not(.locked),
.object-container-full .pub-end:not(.locked){
	background: #fff;
}

.object-container-full .pub-start + .fa-times,
.object-container-full .pub-end + .fa-times{
	position: absolute;
	top: 10px;
	right: 26px;
	cursor: pointer;
}

.object-container-full .pub-start:not(.locked) + .fa-times:hover,
.object-container-full .pub-end:not(.locked) + .fa-times:hover{
	color: red;
}

.col-lang-header{
	border-bottom: 2px solid silver;
	margin: 0px 30px 20px;
	padding-left: 0px;
	padding-right: 0px;
	font-weight: bold;
}

.col-lang.chained::before{
	font-family: fontawesome;
	content: "\f0c1";
	font-size: 20px;
	position: absolute;
	top: 50%;
	margin-top: -16px;
	left: -10px;
	display: inline-block;
	padding: 0px;
	z-index: 1;
}

.col-lang .fa-arrow-circle-right{
	font-size: 20px;
	position: absolute;
	top: 50%;
	margin-top: -18px;
	left: -8px;
	display: inline-block;
	padding: 0px;
	z-index: 1;
	cursor: pointer;
}

.col-lang.chained{
	opacity: 0.5;
}

.col-lang.readonly *,
.col-lang.chained *{
	cursor: not-allowed !important;
}

.col-lang[data-type='String'] textarea,
.col-lang[data-type='Text'] textarea{
	float: left;
}

.col-lang[data-type='Boolean'] .input-group-text{
	position: relative;
}

.col-lang[data-type='Boolean'] [type='checkbox']{
	float: left;
}

.col-lang[data-type='Boolean'] .input-group > label{
	float: left;
	height: 44px;
	line-height: 34px;
	cursor: pointer;
}

.col-lang[data-type='Boolean'] [type='checkbox'] + label{
	font-size: 20px;
	margin-top: 0px;
	height: 20px;
}

.col-lang[data-type='Currency'] [type='text']{
	height: 34px !important;
}

.sp-container{
	z-index: 1;
}

.col-lang .img-preview{
	border: 1px solid silver;
	text-align: center;
	background-color: whitesmoke;
	/*margin-bottom: 10px;*/
	height: 200px;
}

.col-lang .img-reset{
	box-sizing: border-box;
	width: 100%;
	margin-top: 10px;
	height: 40px;
}

.col-lang .img-dropzone{
	height: 250px;
	border: 1px dashed rgba(0, 0, 0, 0.3) !important;
	text-align: center;
	background: transparent url('/img/layout/upload-default.png') no-repeat center;
	background-size: contain;
}

.col-lang .img-dropzone:hover{
	cursor: pointer;
	background-image: url('/img/layout/upload-hover.png');
	background-size: contain;
}

.col-lang textarea{
	height: 62px;
}

label > .fa-exclamation{
	color: red;
	opacity: 0.5;
	float: right;
	margin-top: 5px;
	margin-left: 2px;
}

div.in-label-selection{
	clear: both;
	float: left;
	border: 1px solid gray;
	border-radius: 3px;
	padding: 4px;
	height: 40px;
	width: 86px;
	position: relative;
	margin-bottom: 14px;
}

div.in-label-selection i.fa-folder-open{
	position: absolute;
	left: 3px;
	top: 5px;
	font-size: 34px;
	cursor: pointer;
	color: silver;
	margin-bottom: 10px;
}

div.in-label-selection i.fa-folder-open:hover{color: black;}

div.in-label-selection i.fa-upload {
	position: absolute;
	left: 42px;
	top: 3px;
	font-size: 34px;
	padding-left: 5px;
	cursor: pointer;
	color: silver;
	border-left: 1px solid silver;
	margin-bottom: 10px;
}

div.in-label-selection i.fa-upload:hover{color: black;}

div.in-label-selection .dz-preview{
	display: none;
}

#object-image-selection > .modal-dialog{
	visibility: hidden;
}

#object-image-selection > .modal-dialog.shown{
	visibility: visible;
}

#object-image-selection > .modal-dialog .card-body{
	overflow-y: scroll;
}

#object-image-selection > .modal-dialog .col-controls-filter .card-body{
	overflow-y: visible;
}


/************************************************************************************
 *	Zuordnungen																		*
 ***********************************************************************************/
 
.row-relations > .col > .card.closed > .card-body > .fa-spinner{
	display: none;
}

.row-relations .nav-tabs li{
	border-bottom: 1px solid #fff;
	margin-bottom: -1px;	
}
 
.row-relations .nav-tabs li > a.active{
 	color: #337ab7;
}

.row-relations .relation-objects > .row > .col-sm-11{
	padding: 0px;
}

.row-relations .relation-objects > .row > .col > .form-group > div > div.placeholder{
	box-sizing: border-box;
    width: -webkit-calc(100% - 30px);
    width:    -moz-calc(100% - 30px);
    width:         calc(100% - 30px);
    width: 100%;
	height: 68.2px;
	margin-top: 20px;
	border: 2px dashed silver;
}

.row-relations > .col > .card > .card-body > .row > .col:first-child .card-header > .fa-arrow-left{display: none;}
.row-relations > .col > .card > .card-body > .row > .col:last-child .card-header > .fa-arrow-right{display: none;}
 


/************************************************************************************
 *	Verzeichnisse																	*
 ***********************************************************************************/
  
/* Navigation */

.row-relations > div > div > div:first-child > .nav-tabs > li{
	background: #fff;
}

.row-relations > div > div > div > .nav-tabs > li{
	background: #fff;
}

.row-relations > div > div > div > .nav-tabs a{
	cursor: pointer;
}

.row-relations > div > div > div > .nav-tabs i{
	cursor: pointer;
}

.row-relations > div > div > div > .nav-tabs i.fa-plus{
	color: blue;
}

.row-relations > div > > div > div > .nav-tabs i.fa-close{
	color: red;
}

.row-relations .tree{
	margin-top: 20px;
	display: block;
	/*border: 1px dashed silver;*/
	border-radius: 4px;
}

.row-relations .tree > ul{
	position: relative;
	padding: 0px;
	margin-right: 100px;
	margin-bottom: 10px;
	clear: both;
}

.row-relations .tree ul li.ui-sortable-handle{
	position: relative;
	margin-top: 10px;
	width: 100%;
	clear: both;
}

.row-relations .tree ul::after{
	content: "";
	display: table;
	clear: both;
}

.row-relations .tree li.ui-sortable-handle > ul{
	clear: both;
}

.row-relations .tree ul,
.row-relations .tree li.ui-sortable-handle{
	position: relative;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.row-relations .tree ul{
	margin-left: 50px;
	padding-left: 0px;
}

.row-relations .tree .replace-object{
	position: relative;
	box-sizing: border-box;
	height: 100px;
	width: 100%;
	padding: 0px;
	margin-top: 10px;
	border: 1px dashed silver;
}

/*
.row-relations .tree .replace-object::before{
	display: blocK;
	content: "unterordnen";
	position: absolute;
	box-sizing: border-box;
	left: 50px;
	top: 0px;
	bottom: 0px;
	width: 50%;
	padding-left: 10px;
	padding-top: 10px;
	font-weight: bold;
	border-right: 1px solid silver;
	border-top-left-radius: 4px;
	border-top-left-radius: 4px;
}

.row-relations .tree .replace-object::before::hover{
	background: yellow
}

.row-relations .tree .replace-object::after{
	display: blocK;
	content: "rechts einrücken";
	position: absolute;
	box-sizing: border-box;
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 50%;
	padding-left: 10px;
	padding-top: 10px;
	font-weight: bold;
	border-top-right-radius: 4px;
	border-top-right-radius: 4px;
}

.row-relations .tree .replace-object::after::hover{
	background: yellow
}

*/

/*
.row-relations .tree > ul ul > li{
	border-left: 1px solid silver;
	border
}
*/

.row-relations .tree > div{
	float: left;	
	height: 60px;
	line-height: 40px;
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid silver;
	padding: 10px;
	margin-bottom: 10px;
}

.row-relations .tree > ul li.ui-sortable-handle::after{
	position: absolute;
	display: block;
	content: "";
	width: 2px;
	top: -10px;
	bottom: 0px;
	left: -29px;
	background-color: silver;
}

.row-relations .tree > ul ul > li.ui-sortable-handle::after{
	top: -10px;
}

.row-relations .tree ul > li.ui-sortable-handle:last-child::after{
	height: 68px;
	border-bottom-left-radius: 4px;
}

.row-relations .tree > ul ul > li.ui-sortable-handle:last-child::after{
	height: 68px;
}

.row-relations .tree > ul li.ui-sortable-handle::before{
	position: absolute;
	display: block;
	content: "";
	height: 2px;
	top: 56px;
	bottom: 21px;
	left: -27px;
	width: 27px;
	background-color: silver;
}

.row-relations .tree > ul li.ui-sortable-handle.moving::before,
.row-relations .tree > ul li.ui-sortable-handle.moving::after{
	display: none;
}

.row-relations ul.nav-tabs + div{
	margin-top: 20px;
	margin-bottom: 20px;
	display: block;
	/*border: 1px dashed silver;*/
	border-radius: 4px;
	min-height: 200px;
}

.row-relations ul.nav-tabs + div > fieldset{
	box-sizing: border-box;
	width: 100%;
}

.row-relations ul.nav-tabs + div > fieldset > div{
	float: left;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid silver;
	/*padding: 10px;*/
	margin-left: 0px;
	padding-top: 6px;
	height: 60px;
}

.row-relations ul.nav-tabs + div > fieldset > div > div:first-child{
	padding-top: 7px;
}

.row-relations ul.nav-tabs + div > fieldset > div > div:last-child{
	padding-top: 5px;
}

.relation-objects-not-assigned > div{
	padding-top: 10px;
}

.relation-objects-not-assigned .card-header .fa-minus{
	display: none;
}

.relation-objects-not-assigned [data-relations-not-assigned] > ul,
.relation-objects-not-assigned [data-relations-not-assigned] > ul > li{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.relation-objects .card{
	margin-bottom: 10px;
}

.ui-tooltip.error{
	border-color: red;
}


/************************************************************************************
 *	Bildauswahl																		*
 ***********************************************************************************/
 
/* Allgemein */
 
.modal .card-header > i{
	line-height: 20px;
}
 
.modal .card-header > i:hover{
	cursor: pointer;
	color: red;
}

 
/* Filter */
 
.modal .filter .fa-times:hover,
.modal .filter .fa-remove:hover{
	color: red;
}
 
.modal .filter .input-group-addon{
	width: 100px;
}

.modal .filter .input-group-addon + div{
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	margin-bottom: 0;
 	float: right;
 	margin-bottom: 10px;
}

.modal .filter .input-group-addon + div > .multi-dropdown{
	width: 100%;
}

.modal .filter .input-group > i.fa-remove {
    position: absolute;
    right: 11px;
    top: 10px;
    z-index: 2;
    cursor: pointer;
}

.modal .filter .multi-dropdown{
	z-index: 200;
} 


/* Sortierung */
 
.modal .sort .btn-sort-group{
	margin-bottom: 0px;
}

.modal .sort .btn-sort-group li{
	padding: 5px 5px;
}

.modal .sort .btn-sort-group li .badge{
	background-color: transparent;
	padding: 3px 5px;
}

.modal .sort .btn-sort-group li .badge i{
	cursor: pointer;
	font-size: 14px;
	color: blue;
}

.modal .sort .btn-sort .fa-square-o,
.modal .sort .btn-sort .fa-check-square{
	cursor: pointer;
}

.modal .sort .btn-sort .fa-check-square{
	color: DodgerBlue;
}

.modal .sort .btn-sort .fa-square-o + span{
	margin-left: 1px;
	color: silver;
}

.modal .sort .btn-sort .fa-check-square-o + span{
	color: #000;
}
 
.modal .sort .btn-sort-group{
	margin-bottom: 0px;
}

.modal .sort .btn-sort .fa-arrows{
	float: right;
	margin-top: 4px;
	margin-right: 1px;
	cursor: move;
}


/* Bilder */

.modal .images .card-header > span{
	float: right;
	border: 2px solid silver;
	border-radius: 4px;
	padding: 2px 4px;
	line-height: 14px;
	margin-left: 3px;
	border-style: outset;
	cursor: pointer;
	opacity: 0.6;
}

.modal .images .card-header > span:hover,
.modal .images .card-header > span.active{
	border-style: inset;
	opacity: 1;
}

.modal .images .card-header > span.active{
	cursor: default;
}

.modal .images table{
	width: 100%;
	margin-top: 10px;
}

.modal .images table[data-length='30'] tr td{
	width: 107px;
	height: 107px;
}

.modal .images table[data-length='24'] tr td{
	width: 134px;
	height: 134px;
}

.modal .images table[data-length='18'] tr td{
	width: 119px;
	height: 119px;
}

.modal .images table[data-length='12'] tr td{
	width: 171px;
	height: 171px;
}

.image-select-row .col{
	padding: 0px;
	margin: 0px;
}

.image-select-thumb{
	position: relative;
 	border: 2px dashed silver;
 	border-radius: 4px;
 	margin: 5px;
 	float: left;
 	width: 90%;
 	height: 90%;
	cursor: pointer;
}

.image-select-thumb:hover{
	border: 2px solid gray;
}

.image-select-thumb.selected:hover,
.image-select-thumb.selected{
	border: 2px solid #000;
}

.image-select-thumb img{
	width: 90%;
	margin: 5%;
}

.image-select-thumb .fa-eye{
	position: absolute;
	top: 5px;
	left: 5px;
	font-size: 16px;
	color: silver;
}

.image-select-thumb .fa-eye:hover{
	color: green;
}

.image-select-thumb .fa-info-circle{
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 16px;
	color: silver;
}

.image-select-thumb .fa-info-circle:hover{
	color: green;
}




/************************************************************************************
 *	Image-Modal																		*
 ***********************************************************************************/
 
/* The Modal (background) */
.img-modal{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.img-modal > .modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
.img-modal > .caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.img-modal > .modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.img-modal > .close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.img-modal > .close:hover,
.img-modal > .close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .img-modal > .modal-content {
    width: 100%;
  }
}


/************************************************************************************
 *	Bilderfassungs-Dialog															*
 ***********************************************************************************/
 
.modal-object-image > .modal-dialog{
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	margin: 0px;
}

.modal-object-image > .modal-dialog > .modal-content{
	height: 100%;
	width: 100%;
	max-height: 100%;
	max-width: 100%;
}

.modal-object-image > .modal-dialog > .modal-content > .modal-body{
	overflow-y: auto;
}

.ui-datepicker,
.wickedpicker{
    z-index: 9999 !important;
}


/************************************************************************************
 *	Bild-Sortierung	/ Download-Sortierung											*
 ***********************************************************************************/
 
.picture-wrapper,
.download-wrapper{
	margin-bottom: 10px;
	margin-left: 17px;
	float: left;
	width: 100%;
	min-height: 100px;
}

.picture-wrapper > .image-sort-thumb,
.download-wrapper > .image-sort-thumb{
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	border: 1px solid gray;
	border-radius: 3px;
	padding: 4px;
	position: relative;
}

.picture-wrapper > .image-sort-thumb img,
.download-wrapper > .image-sort-thumb img{
	width: 100px;
	height: 100px;
}

.picture-wrapper > .image-sort-thumb i.fa-close,
.picture-wrapper > .image-sort-thumb i.fa-trash,
.picture-wrapper > .image-sort-thumb i.fa-undo{
	position: absolute;
	top: 2px;
	right: 2px;
	color: red;
	cursor: pointer;
}

.picture-wrapper > .image-sort-thumb.removed img{
	opacity: 0.3;	
}

.picture-wrapper > .image-sort-thumb i.fa-undo{
	right: 16px;
	color: green;
}

.picture-wrapper > .image-sort-thumb:not(.removed) i:not(.fa-close):not(.fa-eye):not(.fa-info-circle){
	display: none;
}

.picture-wrapper > .image-sort-thumb.removed i.fa-close:not(.fa-eye):not(.fa-info-circle){
	display: none;
}

.picture-wrapper > .image-sort-thumb .fa-eye{position: absolute; top: 2px; left: 2px;}
.picture-wrapper > .image-sort-thumb .fa-info-circle{position: absolute; top: 2px; left: 20px;}

.picture-wrapper > .image-sort-thumb .fa-eye,
.picture-wrapper > .image-sort-thumb .fa-info-circle{
	opacity: 0.5;
}

.picture-wrapper > .image-sort-thumb .fa-eye:hover,
.picture-wrapper > .image-sort-thumb .fa-info-circle:hover{
	opacity: 1;
	cursor: pointer;
}

.picPlaceholder{
	 width:110px;
	 height:108px;
	 float:left;
	 margin-right:5px;
	 border-radius: 4px;
	 border: 1px dotted silver;
	 background-color: white;
}

.downloadPlaceholder{
	width: 100%;
	height: 59px;
	margin-bottom: 20px;
	border: 2px dotted silver;
}

.picture-wrapper > .select-image,
.select-download{
	float: left;
	margin-right: 5px;
	border: 1px solid gray;
	border-radius: 3px;
	padding: 4px;
	height: 110px;
	width: 68px;
	position: relative;
}

.picture-wrapper > .select-image > .fa,
.select-download > .fa{
	position: absolute;
	left: 8px;
	font-size: 54px;
	cursor: pointer;
	color: silver;
}

.picture-wrapper > .select-image > .fa:hover,
.select-download > .fa:hover{
	color: #000;
}

.picture-wrapper > .select-image > .fa-folder-open,
.select-download > .fa-folder-open{
	top: 3px;
}

.picture-wrapper > .select-image > .fa-upload,
.select-download > .fa-upload{
	bottom: 0px;
	border-top: 1px solid silver;
}

.panel-body th a.fa{
	color: gainsboro;
}

.panel-body th a.fa:hover{
	text-decoration: none;
	color: #000;
}

.img-dropzone .dz-preview{
	display: none !important;
}


/************************************************************************************
 *	Übersicht-Typ																	*
 ***********************************************************************************/

.wrapper-view .card-body > *{
	float: left;
}

.table-filter-row .card-body >  *:not(.multi-dropdown){
	float: right;
	margin-top: -30px;
}

.table-filter-row .card-body > .multi-dropdown{
	width: 100%;
}

.objects-overview-type{
	float: left;
	margin-left: 10px;
	border: 1px solid silver;
	border-radius: 4px;
	padding: 0px 5px;
	font-size: 21px;
}

.objects-overview-type > .fa{
	font-size: 21px;
	color: #000;
	opacity: 0.3
}

.objects-overview-type > .fa.selected{
	opacity: 1;
}

.objects-overview-type > .fa:not(.selected){
	cursor: pointer;
}


/************************************************************************************
 *	Übersicht-Typ																	*
 ***********************************************************************************/
 
.object-list-table{
	width: 100%;
	border: 1px groove silver;
}

.object-list-table th{
	padding: 10px;
	background: rgba(0,0,0,.03);
}

.object-list-table td{
	padding: 10px;
	border-color: silver;
}


/************************************************************************************
 *	Tabellen																		*
 ***********************************************************************************/
 
table.object-list-table th[data-fieldtype='meta'][data-fieldname='id']{width: 80px;}
table.object-list-table th[data-fieldtype='meta'][data-fieldname='created']{width: 200px;}
 
table.object-list-table[data-type-count='1'] th[data-fieldtype='meta'][data-fieldname='type'],
table.object-list-table[data-type-count='1'] td[data-fieldtype='meta'][data-fieldname='type']{display: none;}
 
table.object-list-table[data-type='data_onlineanfragen'] th[data-fieldtype='meta'][data-fieldname='id'],
table.object-list-table[data-type='data_onlineanfragen'] td[data-fieldtype='meta'][data-fieldname='id']{display: none;}
table.object-list-table[data-type='data_onlineanfragen'] th[data-fieldtype='meta'][data-fieldname='keywords'],
table.object-list-table[data-type='data_onlineanfragen'] td[data-fieldtype='meta'][data-fieldname='keywords']{display: none;}
table.object-list-table[data-type='data_onlineanfragen'] th[data-fieldtype='meta'][data-fieldname='description'],
table.object-list-table[data-type='data_onlineanfragen'] td[data-fieldtype='meta'][data-fieldname='description']{display: none;}