@charset "utf-8";

:root {
  --gap: 1em;
  
  --gap-row: var(--gap);
  --gap-container: var(--gap);  

  --icon: "\f005";
}

/* [data-icon]{
    --icon: "\f005";
} */


/*body {
  --gap-row: var(--gap);
  --gap-container: var(--gap);    
} */


/*
@font-face{
	font-family:'FontAwesome';
	src:url('font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
	src:url('font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight:normal;
	font-style:normal;
        font-display: swap;
}
*/

@font-face{
	font-family:'FontAwesome';
	src:url('fontawesome-5.15.1/fa-solid-900.eot?v=5.15.1');
	src:url('fontawesome-5.15.1/fa-solid-900.eot?#iefix&v=5.15.1') format('embedded-opentype'),url('fontawesome-5.15.1/fa-solid-900.woff2?v=5.15.1') format('woff2'),url('fontawesome-5.15.1/fa-solid-900.woff?v=5.15.1') format('woff'),url('fontawesome-5.15.1/fa-solid-900.ttf?v=5.15.1') format('truetype'),url('fontawesome-5.15.1/fa-solid-900.svg?v=5.15.1#fontawesomeregular') format('svg');
	font-weight:normal;
	font-style:normal;
        font-display: swap;
}

@font-face{
	font-family:'FontAwesome';
	src:url('fontawesome-5.15.1/fa-brands-400.eot?v=5.15.1');
	src:url('fontawesome-5.15.1/fa-brands-400.eot?#iefix&v=5.15.1') format('embedded-opentype'),url('fontawesome-5.15.1/fa-brands-400.woff2?v=5.15.1') format('woff2'),url('fontawesome-5.15.1/fa-brands-400.woff?v=5.15.1') format('woff'),url('fontawesome-5.15.1/fa-brands-400.ttf?v=5.15.1') format('truetype'),url('fontawesome-5.15.1/fa-brands-400.svg?v=5.15.1#fontawesomeregular') format('svg');
	font-weight:normal;
	font-style:normal;
        font-display: swap;
}







a {
    cursor: pointer;
}

.trash {
	opacity: 0.5;
}

*, *:after, *:before {
    box-sizing: border-box;
    -moz-box-sizing:border-box;	
    -webkit-box-sizing:border-box;    
}	


* {
    vertical-align: top;
}	


/*
:not(.editor) *, not(.editor) *:after, not(.editor) *:before {
	-webkit-transition:	max-width 0.3s ease-in-out, max-height 0.3s ease-in-out, padding 0.3s ease-in-out, outline 0.3s ease-in-out, border 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
 	transition: 		max-width 0.3s ease-in-out, max-height 0.3s ease-in-out, padding 0.3s ease-in-out, outline 0.3s ease-in-out, border 0.3s ease-in-out, box-shadow 0.3s ease-in-out;     
}
*/

html {
    text-size-adjust: none !important;
    -moz-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
    -webkit-text-size-adjust: none !important; /* iPhone ignores CSS otherwise */ 

    /*overflow-x: hidden;*/ /* POSITION: STICKY NOT WORKING ANYMORE  */  
    width: 100%;
        
    overflow-y: scroll;
}

html[data-dimension="xs"] {
    overflow-x: hidden; 
    /* POSITION: STICKY NOT WORKING ANYMORE  */  
}



body {
    margin: 0;
    font-size: 16px;
    font-family: Arial;
    
    overflow-x: hidden;
    width: 100%;
        
}

input, select, textarea, checkbox {
    color: inherit;
    font-size: inherit;
    font-family: inherit;    
}

input:not([type]), input[type="text"], input[type="number"], input[type="password"], select, textarea {    
    width: var(--col-width);
    border: 0px none;
}


.controller {
	z-index: 1;
	position: relative;	
	display: inline-block;
	padding-right: 40px;
	vertical-align: top;
	opacity: 0;
	transition: opacity 0.5s;
            white-space: nowrap;
}
.controller:empty {
	display: none;
}
.controller.alwaysVisible {
    opacity: 1;
}

.field_header{
    font-weight: bold;
}

.field_header:hover>.controller,
.mouseOver>.controller,
.mouseOver>[data-template]>.controller {
	opacity: 1;
}

.field_header .controller {
    /*position: absolute;*/
    background-color: var(--color-headline);
    line-height: 1.75em;
    padding: 0.2em;
    /*color: var(--color-main);*/
}

*>.controller>* {
	opacity: 1 !important;
}





[data-icon]:before {
    width: 1em;
    display: inline-block;
    font-weight: normal;
    text-align: center;
}
[data-icon]:not(:empty):before {
/*	margin-right: 5px;
    width: 1em;*/
    width: 1.4em;
    display: inline-block;
    text-align: left;
}




.icon {
    display: inline-block; 
}
.icon::before {
	min-width: 1em;
        font-family: 'FontAwesome';
        text-decoration: none;
        font-weight: normal;
}

.iconFont, button.iconFont {
	font-family: 'FontAwesome';	
}

[data-icon]::before{
	min-width: 1em;
    font-family: "FontAwesome";
    content: attr(data-icon);
}
[data-icon=""]::before {
    content: ""var(--icon);
}




button.icon {
/*
	padding: 6px;
	padding-top: 3px;
	padding-bottom: 3px;
*/	
	/*border-radius: 10px;*/
        border-radius: 1em;
	/*color: #999999;*/
        color: var(--color-main);
	
	line-height: 1.75em;
        
        transition: all 0.5s;

	
}

.icon:not(:empty):before {	
	padding-right: 2px;	
}
.icon:not(:empty) {
	padding-right: 10px;
}
button.icon[data-hint]:not(:empty):after {
	margin-left:2px;
}

button.icon:hover{
	color: white;
	background-color: var(--color-headline);

}

button.icon:after{
	display: none;	
}

button.icon[data-hint]:after {
	content: attr(data-hint);	

	position: absolute;
	font-size: 70%;
	pointer-events: none;
	max-width:0px;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;

	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	
	/*margin-top: 0.30em;*/
	margin-left: 0px;
	
	line-height: 1.75em;
	
	padding-left: 16px;	
	padding-right: 8px;
	
	margin-left: -6px;	
	
	z-index: -1;	

	color: transparent;
	background-color: transparent;	
        
        top: 0.30em;
        left: 2em;
        
        transition: all 0.5s;
}

button.icon[data-hint]:hover:after{
	max-width:200px;
	background-color: var(--color-main);
	/*background-color: #999999;*/
	color: white ;	
}

button.icon[data-hint]:not(:hover):after {
    text-shadow: none;
    box-shadow: none;
}




button.icon::before {
	font-family: "FontAwesome"; 
	position:relative;
        z-index: -5;

	width: 1.75em;
	display: inline-block;	   
        /*vertical-align: text-top;*/        
}

button.icon:hover:before {
	font-family: "FontAwesome"; 
	/*z-index: 2;*/
        z-index: 11;
        background-color: inherit;
        border-radius: inherit;
	      	
}

[data-icon]::before {
	font-family: "FontAwesome"; 
}





[data-icon="new"]::before 			{ content: '' }
[data-icon="document"]::before 		{ content: '' }
[data-icon="down"]::before 			{ content: '' }
[data-icon="up"]::before 			{ content: '' }

[data-icon="toggleCollapse"]::before 			{ content: '' }
.collapsed [data-icon="toggleCollapse"]::before 			{ content: '' }


.icon.detail::before {
	content: '';
}

.icon.delete::before {
/*	content: ''; */
	content: '\f1f8';
}

.icon.print::before {
	content: '';
}
.icon.duplicate::before {
	content: '';
}
.icon.duplicateWithChildren::before {
	content: '';
}
.icon.user::before {
	content: '';
}
.icon.dragHandle:before{
	content : "\f256";	
}

.icon.new:before { 
	content: '';
}
.icon.download::before {
	content: '';
}





a img
{
	border:0px none;
	margin:0px;
	padding:0px;
}


ul, li {
        text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
        -ms-text-size-adjust: none !important;
	-webkit-text-size-adjust: none !important; /* iPhone ignores CSS otherwise */ 
}

ul[data-structure="set"]
{
	position: relative;
	padding:0px;	
	margin: 0px;
}
ul.clean, .noBullets ul {
	padding:0px;	
	margin: 0px;    
}
ul.clean>li, .noBullets li {
    list-style: outside none none;	 
}



.li_check ul, ul.li_check {
    padding-left: 0px;
}
.li_check li{
    list-style: none;
    padding-left: 2.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.li_check li:before{
    content: '\f00c';
    font-family: 'FontAwesome';
    color: var(--color-highlight);
    position: absolute;
    margin-left: -1.5em;
    font-size: 130%;
}
.li_check li li:before{
    content: '\f0da';
    margin-left: -1em;
}







li[data-structure="entity"]
{
	position: relative;
	list-style: outside none none;		
}

[data-structure="entity"]>[data-structure="field"]
{
	/*display:none;*/
	vertical-align: top;
}
[data-structure="field"]
{
	position: relative;
}


[data-structure="field"]>p:first-child {
	margin-top: 0px;
}

[data-structure="field"]>p:last-child {
	margin-bottom:0px;
}
	
.editorHeader {
    font-weight: bold;
    color: var(--color-headline);	
    line-height: 4em;
}

.editorDialog {
    color: #333333;
    opacity: 0;
    transition: opacity 1s;
}



[data-structure="field"][data-label]::after{
    content: attr(data-label);
    /*font-weight: bold;*/
    position: absolute;
    color: var(--color-headline);
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 0.6em;
    line-height: 1em;
    
    top: 0;
    left:0;
    transition: font-size 0.2s;
    /*margin-top: -0.8em;*/
}
[data-structure="field"][data-label]:hover::after{
    font-size: 0.8em;
}

[data-structure="field"][data-label]{
    padding-top: 0.8em;
    min-height: 2.5em;
    word-break: break-all;  
    word-wrap: break-word;  
}

/*.auto[data-structure="set"]>[data-structure="entity"] {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dotted #666666;	
}*/

.auto-dataset [data-structure="set"]>[data-structure="entity"], 
.auto[data-structure="set"]>[data-structure="entity"],
.auto[data-template],
.auto[data-structure="entity"] {
    margin-top: 6px;
    margin-bottom: 6px; 
    padding-top: 0.8em;
    padding-bottom: 0.8em;
    
    padding-left: 0.5em;
    padding-right: 0.5em;
    
    border: 1px solid #c3c3c3;
    /*box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);*/
    
    transition: all 0.5s;
    
    border-radius: 2px;
    /*border-radius: 2em;*/
    
/*    margin-top: 20px;
    margin-bottom: 20px;*/
    line-height: 1.75em;        
}

.auto-dataset [data-structure="set"]>[data-structure="entity"]>[data-structure="field"], .auto[data-structure="set"]>[data-structure="entity"]>[data-structure="field"] {   
    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.5s; /* Firefox < 16 */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera < 12.1 */
            animation: fadein 0.5s;
}

[data-template].auto{
    width: 100%;
    display: flex;
}


body:not(.group_admin) [data-template-editor]{
    display: none !important;
}

[data-template-editor]{
    outline: 2px dashed var(--color-headline);
    outline-offset: -2px;
}

[data-template-editor] [data-field]{
    min-width: 3em;
}
[data-template-editor] [data-module="Placeholder"]:after{
    content: '[data-field="' attr(data-field) '"]';
    outline: 1px dotted;
    outline-offset: 0.1em;
}



@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}




.auto-dataset [data-structure="set"]>[data-structure="entity"]:hover, 
.auto[data-structure="set"]>[data-structure="entity"]:hover,
[data-structure="entity"]:hover>.auto[data-template]
{
    border: 1px solid var(--color-headline);
    /*box-shadow: 0px 2px 5px var(--color-highlight);*/
    transform: scaleY(-3px);
    /*box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);*/
    
    /*border-radius: 2px;*/
    
    border-radius: 2em;
    
    
}

.auto-dataset [data-structure="set"]>[data-structure="entity"]>.controller,  
.auto[data-structure="set"]>[data-structure="entity"]>.controller, 
.auto[data-template]>.controller 
{	
	display: inline-block;
        flex-shrink: 0;
        /*padding-left: 0.5em;*/
        padding-right: 0.5em;
}
.auto-dataset [data-structure="set"]>[data-structure="entity"]>[data-structure="field"],  .auto[data-structure="set"]>[data-structure="entity"]>[data-structure="field"] {
	display: inline-block;	
}
	
	
	
.hasControls {
	min-height: 40px;
}




button, input[type="submit"]
{
	background-color:transparent;
	border:0px none;	
	font-size:inherit;
	font-family:inherit;
	padding:0px;
	margin:0px;
	color:inherit;
	
	appearance: none;
	-webkit-appearance: none;
	
	cursor: pointer;
        
        position: relative;
}


.button{
    background-color: #666666;
    color: white;
    padding: 15px;
    display: inline-block;
}
.button:hover {
    background-color: var(--color-headline);
}
.button a{
    color: inherit;
    transition: inherit;
}

.button.light{
    background-color: var(--color-light);
    color: var(--color-headline);    
}

.button.light:hover{
    /* background-color: var(--color-light);
    color: var(--color-headline);     */
}


#btnLoginToggle:before{
	content: "";
}



#btnNavToggle:before{
	content : "";
}


#btnNavToggle, #btnLoginToggle {
	background-color: rgba(0,0,0,0.6);
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    float: right;
    margin-left:8px;
    margin-top: 7px;
    padding: 6px;
    position: relative;
    color:white;
    font-family: "FontAwesome";   
    font-size:17px; 
    width: 34px;
    cursor: pointer;
}






/* RESPONSIVE */



[data-module="Html"] {
	width: 100%;
}





#content:after
{
	display:none;
}




html:not([data-dimension="xs"]) .onlyXS {
    display: none;
}

html[data-dimension="xs"] .notXS {
    display: none;
}

body:not(.group_admin) .adminOnly {
    display: none;
}


body:not(.group_admin) .editor{
    display: none !important;
}




/* MENÜ */


nav ul
{
	padding:0px;	
	margin: 0px;
	
	overflow: initial;
}


nav ul li
{
	list-style: outside none none;
	
	float: none;
}


nav li ul {
	display: none;
	
}




#menu li{

}

#menu ul{

}




ul[data-item-direction="vertical"]>li {
	display: inline;
	float: none;
	position: relative;
}
ul[data-item-direction="vertical"]>li:after {
    content:"\a";
    white-space: pre;
    display: none;
}
 

ul[data-item-direction="horizontal"]{
	white-space: nowrap;	
	position: relative;	
	
	overflow: inherit;	
}

ul[data-item-direction="horizontal"]>li {
	display: inline-block;
	white-space: nowrap;
    vertical-align: top;	
	float: none;	
} 



	/* VERTICAL TO HORIZONTAL */
	/*[data-dimension='xs'] .auto-responsive ul[data-item-direction="horizontal"]>li {*/
	[data-dimension='xs'] .auto-responsive ul>li {
		display: inline;
		float: none;
		position: relative;
	}
	/*[data-dimension='xs'] .auto-responsive ul[data-item-direction="horizontal"]>li:after { 
		content:"\a";
	    white-space: pre;
	}	
	*/
	
	/*
	.col-sm-0 {
		display: none;
	}
	*/


/*
@media (max-width: 1199px)  {
	.col-md-0 {
		display: none;
	}
}


@media (min-width: 1200px)  {
	.col-lg-0 {
		display: none;
	}
}
*/



ul[data-item-position="inside"]{
	position: relative;
}
ul[data-item-position="bottom"]{
		position: absolute;	
}
ul[data-item-position="top"]{
		position: absolute;
}
ul[data-item-position="left"]{
		position: absolute;
		top:0px;
	    right: 100%;
	    display:inline;
	   

}
ul[data-item-position="right"]{
		position: absolute;
		top:0px;
                
                left:100%; /* ??? */

	    display:inline;
}



#menu>ul>li {
	margin-left:20px;
	
}











.draggable_accepting {
	/* outline: solid 5px blue;	*/
	position: relative;
	outline: 2px solid 	#333333;
	outline-style: inset;
}
.draggable_accepting::after {
	font-family: "FontAwesome";   
    content: "";
	right: 0px;
	bottom: 0px;
	line-height: 100vw;
	font-size: 50vw;
	position: absolute;
	top: 0px;
	left: 0px;
		
	color: #333333;
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
	display: inline-block;

}

.draggable_hovering {
	/* outline: solid 8px red;		*/	
}

.draggable_hovering::after {	
	background-color: rgba(0, 0, 0, 0.9);
	color: white;
}


.ui-sortable .dragHandle {
    cursor: grab;
}
.ui-sortable.dragHandleChildren>[data-structure="entity"] {
    cursor: grab;
}




/*

NOT WORKING, SCROLLS TO TOP

body.showingDialog{
    overflow: hidden !important;
    height: 100vh !important;
}

*/


.modalBG {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.75);
	
	z-index: 1000;
	
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	
	justify-content: center;
	
	padding: 15px;

}

.scroll_bg .modalBG {
    overflow: auto;
}
.transparent_bg .modalBG {
    background-color: transparent;
}
.transparent_panel .modalPanel {
    background-color: transparent;
}



.modalPanel {
    display: inline-block;
    position: relative;
}

.modalPanel {
    /*padding-bottom: 93px;*/	
     background-color: white;   

}

.scroll_panel .modalPanel {
    overflow: auto;
    width: 80vw;        /* default, can be overwritten */ 
    height: 80vh;       /* default, can be overwritten */ 
    background-color: white;	
    padding: 20px;
}


.galleryDialog .modalPanel{
     /*background-color: transparent;*/
    background-color: white;
    overflow: visible;
}

.galleryDialog [data-module="Picture"]>picture>img {
     object-fit: contain;
}



.message .modalPanel {
    max-width: 40em;
}


.message .modalPanel {
   
    /* padding: 2em; */

    text-align: center;
    /* webkit-box-shadow: 2px 2px 11px 2px rgba(0,0,0,1);
    -moz-box-shadow: 2px 2px 11px 2px rgba(0,0,0,1);
    box-shadow: 2px 2px 11px 2px rgba(0,0,0,1);
    z-index: 0; */
}

.message .modalButtons {
   
    text-align: center;
}

.messagePanel {

    max-height: 80vh;
    overflow-y: auto;
    
    /* background-color: white;    */
    padding: 2em;

    text-align: center;    
    /* webkit-box-shadow: 2px 2px 11px 2px rgba(0,0,0,1);
    -moz-box-shadow: 2px 2px 11px 2px rgba(0,0,0,1);
    box-shadow: 2px 2px 11px 2px rgba(0,0,0,1); */
    
    z-index: 0;
}

.modal .title{
    font-weight: bold;
    font-size: 130%;
}



/*
.modalPanel>div:first-child {
	overflow: auto;
	height:100%;
	
}*/



.modalButtons {
	/*position: absolute;*/
	/*bottom: 0px;*/
	text-align: right;
	/*background-color: white;*/
	/*width:100%;*/
	right:0px;
	/*padding-right:5vw;*/
}

.messagePanel .modalButtons {
    text-align: center
}

.modalButtons button {
/*	background-color: #666666;*/
        background-color: var(--color-main);
	color: white;
	padding: 15px;
	/*margin: 20px;*/
	margin-left: 20px;
}

.modalButtons button:hover {
	background-color: var(--color-headline);
}

.closingCross {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 22px;
    cursor: pointer;
    color: #9a9a9a;
}
.closingCross:hover {
    color: black;
}




[data-header="false"]>.DisplaySet_Header{
    display: none;
}

.DisplaySet_Header {
	padding: 15px;
	position: relative;	
 	
 	z-index: 10;	
    background-color: var(--color-main);
    /* background-color: var(--color-headline); */
    border-radius: 2px;
    color: white;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);      
    
    flex-basis: 100%;
}


.DisplaySet_Header .filterInput{
    color: var(--color-main);
    
}.DisplaySet_Header .filterInput input{
    /*color: var(--color-main);*/
}

.DisplaySet_Header .filterInput .icon{
    color: var(--color-main);
}





.DisplaySet_Header>li {
	display: inline-block;
}


.DisplaySet_Header .icon {
    color: white;
}


ul.auto[data-structure="set"][data-columns] .DisplaySet_Header {
    /*padding-left: 0px;*/
    padding-left: 0.5em;
    padding-right: 0px;
}

ul.auto[data-structure="set"][data-columns] .DisplaySet_Header .title{
    display: none;
}

ul.auto[data-structure="set"][data-columns] [data-structure="entity"], 
ul.auto[data-structure="set"][data-columns] .DisplaySet_Header, 
.auto [data-structure="entity"]  {
    display: flex;
    flex-direction: row;
}

ul.auto[data-structure="set"][data-columns] [data-structure="field"],
.auto [data-structure="field"],
.auto-item {
    /*flex-grow:1;*/
    flex-shrink:1;  
    /* needed for same size */
    /*width: 100%;*/              
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 0.3em;
    padding-left: 0.3em;
}
.auto .DisplaySet_Header [data-column-field]{
    flex-grow:1;
    flex-shrink:1;  
    width: 100%;                /* needed for same size */
    white-space: nowrap;
    /*overflow: visible;*/
    text-overflow: ellipsis;
    overflow: hidden;    
    line-height: 1.75em;
}

[data-structure="set"] .DisplaySet_Header>.controller{
    opacity: 1;
    flex-shrink: 0;
}

.DisplaySet_Header>.controller .counter {
    background-color: white;
    color: var(--color-main);
    display: inline-block;
    padding-left: 0.8em;
    padding-right: 0.8em;
    border-radius: 1em;
    /*margin-top: 0.3em;*/
    
    transform: scale(0.8);
    line-height: 1.75em;
}



[data-structure="set"].collapsed>*:not(.DisplaySet_Header) {
	display: none !important;
}


[data-structure="set"].streaming>[data-structure="entity"]{
    height: var(--streamingHeight);
}





/* -----------------  GALLERY  -------------------- */

[data-structure="set"].style_tiles {
	line-height: 0px; /* Sonst gibt es Abstand zwischen den Reihen */
}

[data-structure="set"].style_tiles>[data-structure="entity"] {
	display: inline-block; /* shrink to fit */
	width: 25%; /* whatever width you like */
	position: relative; /* so preview image can use position: absolute */		
	line-height: inherit;
}


[data-structure="set"].style_tiles>[data-structure="entity"]::after {
	padding-top: 100%; /* percentage of containing block _width_ */
	display: block;
	content: '';
	/* background-color: red; */
}


[data-structure="set"].style_tiles>[data-structure="entity"]>.preview {
	position: absolute;
	/* top: 15px; bottom: 15px; right: 15px; left: 15px; /* follow the parent's edges */
	top: 0px; bottom: 0px; right: 0px; left: 0px; /* follow the parent's edges */
	outline: 3px solid white; /* just so you can see the box */
	overflow: hidden;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}








.TabContainer {
	padding: 0px;
	border: 0px none;
	border-radius: 0px;	
}

.TabContainer>ul.container_titles {
	padding: 0px;
	border: 0px none;
	border-radius: 0px;	
}

.TabContainer>ul.container_titles>li
{
    margin-bottom: 0px; 
    padding-bottom:0px; 
	border: 0px none;
	border-radius: 0px;	
}

.TabContainer.DraggablePanel {
	z-index: 100;
}




/*
[data-module="Container"][class*="gridrows-"] [data-module="ContainerItem"]>* {
	position: absolute; top:0px; left:0px; right:0px; bottom:0px; 
};
*/

[data-module="Container"][data-frame="grid"] [data-module="ContainerItem"] {
	position: absolute; 
}
[data-module="Container"][data-frame="grid"] [data-module="ContainerItem"]>* {
	position: absolute; top:0px; left:0px; right:0px; bottom:0px; 
}			


.container {
    margin-left: auto;
    margin-right: auto;
/*
    padding-left: 15px;
    padding-right: 15px;    
    */
    position: relative;
} 

[data-module="Container"]>div {
/*	overflow-x: hidden;	*/
	/*overflow: hidden;*/
}

.row {
	/*
    margin-left: -15px !important;
    margin-right: -15px !important;
    */
    /*overflow: hidden;*/
    position: relative;
}
.row:after {
    clear: both;
}

.row>*{
    min-height: 1px;
    position: relative;
	/*float: left;*/	
}

.padding-left	{ 
    padding-left:  calc((100vw - 100rem) / 2 ) !important;
} 
.padding-right	{ 
    padding-right: calc((100vw - 100rem) / 2 ) !important;
} 

.gap [data-module="Container"]:not(.noGap)>div>.row, 
.gap [data-module="Container"]:not(.noGapContainer)>div>.row,
.gapContainer [data-module="Container"]:not(.noGap)>div>.row, 
.gapContainer [data-module="Container"]:not(.noGapContainer)>div>.row,
.gap[data-module="Container"]>div>.row, 	
.gapContainer[data-module="Container"]>div>.row 	
{ 
    margin: calc( var(--gap-container) * -0.5);
}

/*[data-module="Container"]:not(.noGap)>div>.row>*  */ 
.gap [data-module="Container"]:not(.noGap)>div>.row>*, 
.gap [data-module="Container"]:not(.noGapContainer)>div>.row>*,
.gapContainer [data-module="Container"]:not(.noGap)>div>.row>*, 
.gapContainer [data-module="Container"]:not(.noGapContainer)>div>.row>*,
.gap[data-module="Container"]>div>.row>*, 	
.gapContainer[data-module="Container"]>div>.row>* 
{
    padding: calc( var(--gap-container) * 0.5);
}


/*
	allStyles += ':root { --gap: ' + responsive_Border + 'px }\n';	
	allStyles += ':root { --gap-container: ' + responsive_Border + 'px }\n';	
	allStyles += ':root { --gap-row: ' + responsive_Border + 'px }\n';	

*/


.paddingless {
	padding-left: 0px;
	padding-right: 0px;	
}

.gap [data-module="Container"]:not(.noGapRow),  .gapRow [data-module="Container"]:not(.noGapRow),  .gap[data-module="Container"],  .gapRow[data-module="Container"] 
{
    padding-top: calc( var(--gap-row) * 0.5);
    padding-bottom: calc( var(--gap-row) * 0.5);
}




.sameChildHeight {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	
}

.sameChildHeight>[data-module="ContainerItem"]:not(.vertical-align)>*{
    height: 100%;
}

/*[data-module="Container"].sameChildHeight .row {*/
[data-module="Container"]>div>.row {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;	
}

[data-module="ContainerItem"].remainingWidth {
    flex-basis: 1%;
    width: auto !important;
    flex-shrink: 1;
    flex-grow: 1;
}
[data-module="ContainerItem"].contentWidth {
    width: auto !important;
    flex-shrink: 0;
    flex-grow: 0;
}


*, ::before, ::after, input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

*, ::before, ::after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


[format-align="center"] {
	display: flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	
    align-items: center;
    
}

.center-vertical {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.line {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    height: 2em;
    
}
.line::after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0px;
    top: 50%;
    border-bottom: 1px dotted;
}



.layout-height-provider {
  display: flex;
  flex-flow: column;
}

.layout-height-provider>.layout-height-consumer{
    flex: 2 ;
    overflow: auto;
}




[data-ratio] {
    position: relative;
    height: auto !important;
}

[data-ratio]:before{
    content: "";
    display: block;
    padding-top: 100%; 	/* initial ratio of 1:1*/	
    
    padding-top: var(--ratio);
}



[data-ratio]>* {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}

[data-module="Container"][data-ratio]>.container>.row {
    height: 100%;
}


/*

BADLY SUPPORTED, SPEED?

[style*="--aspect-ratio"] {
	height: auto !important;
        height: unset !important;
}


[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 

@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}

*/


/* FULL HEIGHT BUT SQUARE WHEN WIDER THAN LARGE */
/* OVERWRITE IF OTHER SETTINGS NEEDED */
.fullViewHeight{
    height: 100vh;
}
@media (max-aspect-ratio: 1/1) {
    .fullViewHeight{
        min-height: 100vw;
        height: auto;
    }
}



.square:before{
	
	content: "";
	display: block;
	padding-top: 100%; 	 /* initial ratio of 1:1*/
		
}
.square{
/*	position: relative; 
    vertical-align: top;
	
	*/
    
}



.half:before{
	content: "";
	display: block;
	padding-top: 50%; 	/* initial ratio of 1:1*/	
}



.noBreak {
    white-space: nowrap;    
}
.noBreak:after {
    white-space: normal; 
    content: " ";
    width: 0px;
    height: 0px;
}


.break {
    width: 100% !important;
    height: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    display: block;
    clear: both;
    overflow: hidden !important;
}



[data-module="ContainerItem"].vertical-align
{
display: -webkit-flexbox !important;
	display: -ms-flexbox !important;
	display: -webkit-flex !important;
	display: flex !important;
	-webkit-flex-align: center !important;
	-ms-flex-align: center !important;
	-webkit-align-items: center !important;
	align-items: center !important;
	
}
[data-module="ContainerItem"].vertical-align>* {
	width: 100%;
}

.centerVertical{
    top: 50%;
    transform: translate(0%, -50%);        
    /*position: absolute;*/
    
}

.centerHorizontal{
    left: 50%;
    transform: translate(-50%, 0%);   
    /*position: absolute;*/
}





/*
 TABLES NOT WORKING WITH RESPONSIVE FLOATING
 USE JS INSTEAD
 
.sameChildHeight {
	display: table;	
}
.sameChildHeight>*>* {
	display: table-cell;
	float: none;	
	vertical-align: middle;
}
*/




[data-type="textarea"] {
    white-space: normal;
    min-height: 5em;
}




/*.extension[class~=ext-] {*/
.extension {
	width:32px;
	height:32px;
	background-repeat: no-repeat;
	background-image: url(icons-extensions/unknown.png);	
	
    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;	
}


.extension.ext-css		{	background-image: url(icons-extensions/css.png);	}
.extension.ext-cvs 		{	background-image: url(icons-extensions/cvs.png);	}
.extension.ext-doc 		{	background-image: url(icons-extensions/doc.png);	}
.extension.ext-docx 	{	background-image: url(icons-extensions/docx.png);	}
.extension.ext-exe		{	background-image: url(icons-extensions/exe.png);	}
.extension.ext-flv		{	background-image: url(icons-extensions/flv.png);	}
.extension.ext-folder	{	background-image: url(icons-extensions/folder.png);	}
.extension.ext-gif		{	background-image: url(icons-extensions/gif.png);	}
.extension.ext-htm		{	background-image: url(icons-extensions/htm.png);	}
.extension.ext-html		{	background-image: url(icons-extensions/html.png);	}
.extension.ext-jpg		{	background-image: url(icons-extensions/jpg.png);	}
.extension.ext-js		{	background-image: url(icons-extensions/js.png);		}
.extension.ext-mov		{	background-image: url(icons-extensions/mov.png);	}
.extension.ext-mp3 		{	background-image: url(icons-extensions/mp3.png);	}
.extension.ext-mp4 		{	background-image: url(icons-extensions/mp4.png);	}
.extension.ext-pdf 		{	background-image: url(icons-extensions/pdf.png);	}
.extension.ext-php		{	background-image: url(icons-extensions/php.png);	}
.extension.ext-png		{	background-image: url(icons-extensions/png.png);	}
.extension.ext-tif		{	background-image: url(icons-extensions/tif.png);	}
.extension.ext-txt		{	background-image: url(icons-extensions/txt.png);	}
.extension.ext-unknown	{	background-image: url(icons-extensions/unknown.png);}
.extension.ext-wav		{	background-image: url(icons-extensions/wav.png);	}
.extension.ext-xls		{	background-image: url(icons-extensions/xls.png);	}
.extension.ext-xlsx		{	background-image: url(icons-extensions/xlsx.png);	}
.extension.ext-xml		{	background-image: url(icons-extensions/xml.png);	}
.extension.ext-zip		{	background-image: url(icons-extensions/zip.png);	}


.hideEmpty[data-field][data-value="0"], .hideEmpty[data-field]:not([data-value]), .hideEmpty[data-field][data-value=""] {
    display: none !important;      
}
.hideEmpty [data-field][data-value="0"], .hideEmpty [data-field]:not([data-value]), .hideEmpty [data-field][data-value=""] {
    display: none;      
}
[data-template-editor] .hideEmpty [data-field][data-value="0"], [data-template-editor] .hideEmpty [data-field]:not([data-value]), [data-template-editor] .hideEmpty [data-field][data-value=""] {
    display: inline-block;
}

/* IF CLASS defineEmpty IS GIVEN, THIS ELEMENT'S VALUE DEFINES 
IF SUCCESSORS WITH hideByEmpty AND showByEmpty ARE VISIBLE */
.defineEmpty[data-value="0"] ~ .hideByEmpty, .defineEmpty:not([data-value]) ~ .hideByEmpty, .defineEmpty[data-value=""] ~ .hideByEmpty {
    display: none;      
}
.defineEmpty[data-value]:not([data-value="0"]):not([data-value=""]) ~ .showByEmpty {
    display: none;      
}



.printOnly {
    display: none !important;
}

/* page break not working in FireFox inside Table! */
/*
.pageBreak {
    position: relative !important;
    page-break-after: always !important;
    border-bottom: 1px dotted black;            
}
*/

@media print {
	.noPrint {
		display: none !important;
	}
        
        .printOnly {
            display: block !important;
        }

        .container {
            width: 95% !important;
        }
}


button:focus {outline:0;}  /* chrome */


@keyframes spinner {
  to {transform: rotate(360deg);}
}














/*    NODES     */


.nodeButton {
    display: inline-block;    
    height: 100%;
    color: gray;            /* COLOR OF LINES! */
    font-size: 80%;
    padding-right: 10px;
}

.nodeButton:before {        /* BACKGROUND FOR BUTTONS TO PREVENT LINES SHOWING THROUGH */
   position: absolute;
   color: white;
   z-index: -1;
   font-size: 80%;
}  

.nodeButton .nodeButtonLines {
    position: absolute; height: 100%;
    pointer-events: none;
    z-index: -2;
}

[data-structure="entity"] .nodeButton .lineToNext {
    content: ' ';
    width: 0px;
    position: absolute;
    bottom: -0.75em;
    top: 0.75em;
    left: 0.35em;
    border-left: 1px dotted;
    /*margin-bottom: -20px;  = NEGATIVE MARGIN OF ENTITY! */
    margin-bottom: -10px;
}
[data-structure="entity"]:last-child>.nodeButton .lineToNext {
    display: none;
}

[data-structure="entity"] .nodeButton .lineToPrevious {
    content: ' ';
    width: 0px;
    position: absolute;
    /*padding-top: 20px;           = MARGIN OF ENTITY! */
    padding-top: 10px;          /* = MARGIN OF ENTITY! */
    padding-bottom: 0.75em;
    /*margin-top: -20px;           = NEGATIVE MARGIN OF ENTITY! */
    margin-top: -10px;          /* = NEGATIVE MARGIN OF ENTITY! */
    top: 0px;
    left: 0.35em;
    border-left: 1px dotted;
}
[data-structure="set"]>[data-structure="entity"] + [data-structure="entity"]>.nodeButton .lineToPrevious {
    display: none;              /*  HIDE LINE IF NOT FIRST ENTITY ELEMENT */
}
.nodeButton .lineToElement {
    content: ' ';
    height: 0px;
    position: absolute;
    /*top: 15px;*/
    top: 8px;
    left: 0.5em;
    border-top: 1px dotted;
    width: 11.5em;
}

.nodeButton [data-icon] {
    display: none;
    color: black;               /* COLOR OF BUTTON */
    cursor: pointer;
    font-size: 80%;
}


.nodeButton[data-currentState="shown"] [data-icon].btnShow {
    display: inline-block;
}
.nodeButton[data-currentState="hidden"] [data-icon].btnHide {
    display: inline-block;
}

.nodeButton[data-currentState]:hover [data-icon] {
    display: none;
}
.nodeButton[data-nextState="shown"]:hover [data-icon].btnShow {
    display: inline-block;
}
.nodeButton[data-nextState="hidden"]:hover  [data-icon].btnHide {
    display: inline-block;
}



.nodeButton[data-count="0"] [data-icon]{
    display: none !important;
}
.nodeButton[data-count="loading"] [data-icon]{
    display: none !important;
}

.nodeButton[data-count="loading"] [data-icon].btnLoading{
    display: inline-block !important;
}

.nodeButton[data-count="0"] [data-icon].btnEmpty{
    display: inline-block !important;
}


.noNodeLines[data-structure="set"]>[data-structure="entity"]>.nodeButton .lineToPrevious {
    display: none;
}
.noNodeLines[data-structure="set"]>[data-structure="entity"]>.nodeButton .lineToNext {
    display: none;
}


.nodeButton[data-count="loading"] [data-icon].btnLoading{
    transition-property: transform;
    transition-duration: 1s;

    animation-name: rotate; 
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}


.ui-sortable {
    transition: min-height 0.5s;
    min-height: 0em;    
}
.ui-sortable-helper {
    transition: none !important;
}


.draggingArrangeable  *:hover>*>*>.ui-sortable {
    transition: min-height 0.5s;
    min-height: 3em;    
}


.draggingArrangeable [data-structure="entity"]:hover  {
    /*background-color: blue;*/
    
}


.ui-sortable-helper {
   pointer-events: none;
   display: inline-block;
   width: auto !important;
   height: auto !important;
   box-shadow: 2px 3px 19px -5px rgba(0,0,0,0.75);
}
.ui-sortable-helper [data-structure="set"] {
    display: none;
}
.ui-sortable-helper .controller, .ui-sortable-helper .nodeButton  {
    display: none;
}

.ui-arrangeable-placeholder { 
    /*height: 0.5em;*/ 
    min-height: 2em; 
    font-size: 2em;
    line-height: 2em;
    list-style: outside none none;	        
    
    /*line-height: 1.2em;*/    
    position: relative;
    padding: 0px;
    margin: 0px;
    background-color: rgba(1, 1, 0, 0.26);	

    /*transition: height 0.5s;*/
}

/*.ui-arrangeable-placeholder:hover { 
    height: 2em; 
    
  
}*/


.ui-arrangeable-placeholder:before { 
	font-family: "FontAwesome";   
        content: "";
	right: 0px;
	bottom: 0px;
	/*line-height: 3em;*/
        vertical-align: middle;
        
        
	position: absolute;
	top: 0px;
	left: 0px;        
	color: #333333;
	text-align: center;
	display: inline-block;   
}



[data-icon="0"]::before   { content: '\f0c8' }
[data-icon="1"]::before   { content: '\f14a' }

*>.showOnParentHover {
    opacity: 0; 
}
*:hover>.showOnParentHover {
    opacity: 1; 
}

* {
    background-repeat: no-repeat;
}



[data-view="users_account"][data-field="salt"] {
    display: none;
}



.tox-tinymce {
    /*z-index: 1399;*/
    z-index: 1299;
}


.tinymce-fullscreen-inline {
    position: fixed!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100vh !important;
    max-height: 100vh !important;
    /*z-index: 99!important;*/
    padding: 2%!important;
    overflow: auto!important;
    background-color: white;
}

.mce-edit-focus .enhancement_sub, .mce-edit-focus .enhancement {
    opacity: 0.2 !important;
}





/*   PRESETS */
h1 {
    color: var( --color-headline );
    font-size: 2em;
}
h2 {
    color: var( --color-headline );
    font-size: 1.5em;
    font-weight: bold;
}
h3 {
    color: var( --color-headline );
    font-size: 1.2em;
    font-weight: bold;
}
h4 {
    color: var( --color-main );
    font-size: 1em;
    font-weight: bold;
}

.module_Background	{ 
    background-position: center center; 
    background-size: cover; 
    background-repeat: no-repeat; 
}


.bg_inverse, .bg_main {
    color: white;
    background-color: var( --color-main );    
}

.bg_inverse h1, .bg_inverse h2, .bg_inverse h3, .bg_inverse h4, .bg_inverse a, .bg_inverse a:hover {
    color: inherit;
}


.bg_highlight {
    color: white;
    background-color: var( --color-highlight );   
}
.highlight {
    color: var(--color-highlight);
}

.bg_light {
    color: var(--color-main);
    background-color: var( --color-light );   
}

.bg_headline {
    color: white;
    background-color: var(--color-headline);
}
.bg_headline h1, .bg_headline h2, .bg_headline h3 {
    color: inherit;
}



:root {
    --col-width: 10em;
}


.col-width {
    display: inline-block;
    width: var(--col-width);
}




/*[data-structure="field"][data-type="boolean"]{
    font-family: "FontAwesome";
}*/
/*

[data-structure="field"][data-type="boolean"]:after{
    visibility: visible;
    content: "\f046";
    font-family: "FontAwesome";
}
[data-structure="field"][data-type="boolean"][data-value="0"]:after {
    content: "\f096";
}

*/





/*  ------------ ANIMATIONS ------------------- */

/**

.flyin {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 4em;
    padding-left: 10%;
    padding-right: 10%;
    margin-top: 8em;
    margin-bottom: 8em;    
    
    transition: left 1s ease-out, margin-right 1s ease-out, opacity 1s;
}

.flyin[clicked="true"] {
    opacity: 0;    
}      

.decor:nth-of-type(even)  .flyin {
    left: -30%;
}

.decor:nth-of-type(even) .flyin[data-animationviewvisible="true"] {
    left: 0%;
}


.decor:nth-of-type(odd) .flyin {
    margin-right: -30%;
    float: right;
}

.decor:nth-of-type(odd) .flyin[data-animationviewvisible="true"] {
    margin-right: 0%;
}


.flyinBottom {
    bottom: -10rem;
    transition: bottom 1s ease-out;

}

.flyinBottom[data-animationviewvisible="true"] {
    bottom: 0rem;
}

*/



body:not(.notAtTop) .showWhenNotAtTop{
    /*display: none;*/
    opacity: 0;    
}

body.notAtTop .showWhenAtTop{
    /*display: none;*/
    opacity: 0;
}

body.notAtTop .hideWhenNotAtTop{
    /*display: none;*/
    opacity: 0;
}
body:not(.notAtTop) .hideWhenAtTop{
    /*display: none;*/
    opacity: 0;
}



[data-show-if-full-ds]{ display: none !important;}
[data-show-if-empty-ds]{ display: none  !important; }

body.group_admin [data-show-if-full-ds]{ 
    display: block  !important;
    opacity: 0.5;
    
}
body.group_admin [data-show-if-empty-ds]{ 
    display: block  !important;
    opacity: 0.5;   
}





.fill {
    position: absolute;
    height: 100%;    
     /* overwritten by xs */
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;     
    top: 0px;
    --gap-container: 0px;
}    
.fill>* {
    position: absolute;
    height: 100%;
    width: 100%;
    width: -webkit-fill-available; 
    width: fill-available;
    top: 0px; 
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/*
.fill>.row>[data-module="ContainerItem"] {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;    
}
*/
.fill.container>.row {    
    width: calc( var(--width-content) + var(--gap-container));
}

.container {
    /* better than 'margin:auto', also supports position: absolute */
    margin-right: var(--width-margin);
    margin-left: var(--width-margin);
}





[data-module="Container"].expanded{
    /*display: flex;*/  
    background-color: rebeccapurple;
}
[data-module="Container"].expanded>div{
    position: relative;
    min-height: 500px;
    outline: 5px solid blue;
    transform: scale(1);
    margin-top: 0px;
    margin-bottom: 0px;
    z-index:auto;
}
[data-module="Container"].expanded>div>div{
    margin-top: 0px;
    margin-bottom: 0px;
}

[data-module="Container"].expanded>.fix>div{
    height:  500px !important;
}



/* PARALLAX BACKGROUND */
/* !!! NOT WORKING IF PARENTS USE TRANSFORM!  */

.fix{
    position: absolute;
    clip: rect(0, auto, auto, 0);
    overflow: hidden;
    height: 100%;    
    width: 100%;
}
.fix.container {
    /* ADD MARGIN TO CLIP IF ROW USES MARGINS */
    /*clip: rect(0px, auto, auto, calc( -1 * var(--width-margin)));*/
    /* clip: rect(0px, calc( var(--width-content) + 0.5 * var(--gap-container) ), auto, calc( -1 * var(--width-margin))); /* apply margin */
    clip: rect(0px, 100vw, auto, calc( -1 * var(--width-margin)));    /* full width */
}
    


.fix>*{
    position: fixed !important;
    height: 100%;
    
    /* HEIGHT IS SET DYNAMICALLY BY OBSERVER OF PARENT */  
    
    height: calc( var(--outer-height) + var(--offset-top));
    
    max-height: 100vh;
    /*width: 100%;*/
    padding: 0px;
    
    top: 0px;
}

/* SAFARI BUG, NOT SHOWING PARALLAX PICTURES */
/* Safari 7.1+ */
_::-webkit-full-page-media .fix>*, _:future .fix>*, :root .fix>* {
    position: relative !important;
    height: 100%;
}
_::-webkit-full-page-media .fix, _:future .fix, :root .fix {
    clip: unset;
}


/* DISABLE PARALLAX IN INTERNET EXPORER AND OLD EDGE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){    
    .fix>*{
        position: absolute !important;
        height: 100% !important;
        max-height: none !important;
    }   
}
@supports (-ms-ime-align:auto) {    
    .fix>*{
        position: absolute !important;
        height: 100% !important;
        max-height: none !important;
    }   
}


/*.fixed *{

    top: 0px !important;
    left: 100px !important;
    height: 1000px !important;
    max-height: 1000px !important;


}*/






.layer.background {
    /*z-index: -1;*/
    --gap-container: 0;
}
.layer.background [data-module="ContainerItem"]{
/*    padding: 0px !important;
    padding: 0px;*/
    height: 100%;
}



[data-module="Container"][observed-visible="true"]{
    transform: unset !important;
}

#content [data-module="Container"]{
    position: relative;
}







/* SCROLLER */


.scroller_panel[data-presentation="scroller"] {
    /*overflow: hidden;*/
    overflow-x: scroll;
    flex-wrap: nowrap !important;
    display: flex;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scroller_panel[data-presentation="scroller"]::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scroller_panel[data-presentation="scroller"] {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}



.scroller.scroller_expanded .scroller_panel[data-presentation="scroller"]{
    flex-wrap: wrap !important;
    overflow: visible;
}



.scroller_panel[data-presentation="scroller"]>*{
    flex-shrink: 0;
    flex-grow: 0;
    /*display: inline-block;*/    
}


.scroller_btn{
    cursor: pointer;
    height: 100%;
    font-size: 2em;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    
    top: 0px;
    z-index: 1;
    
    width: auto;
}
.scroller_btn>div{
    transition: color 0.3s, transform 0.3s;
}

.scroller_btn:hover>div{
    transform: scale(1.5);
    color: var(--color-headline);
}


.scroller_btnLeft {
    margin-left: calc(var(--gap) / 2);
    left: 0px;
}
.scroller_btnRight {
    margin-right: calc(var(--gap) / 2);
    right: 0px;
}

.scroller_btnExpand {
    margin-right: calc(var(--gap) / 2);
    right: 0px;
    top: 1.5em;
    height: auto !important;
}

.scroller_expanded .scroller_btnExpand>div::before {
    content: '\f066';
    content: '\f0dc';
    transform: rotate(90deg);
}

.scroller_expanded .scroller_btnLeft{
    display: none;
}


.scroller_expanded .scroller_btnRight{
    display: none;
}


.scroller_panel[data-presentation="scroller"] {
    margin-left: 3.5em;
    margin-right: 3.5em;
    /* padding: 1.5em !important; */
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}


.scroller[data-scroller-animation="fade"] .scroller_panel{
    /*flex-direction: column-reverse;*/
}
.scroller[data-scroller-animation="fade"] [data-module="ContainerItem"]{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.scroller[data-scroller-animation="fade"] [data-module="ContainerItem"]{
    transition: all 3s;
}

.scroller[data-scroller-animation="fade"] [data-module="ContainerItem"][data-scroller-seen]{
    opacity: 0;
    transform: scale(1.5);
}


/* Gallery */

[data-structure='set'] [data-view='pictures'][data-structure='entity'] {
    /* border-radius: 20px; */
    width: 50%;
    height: 44rem;
    padding: 2em;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    outline: 2px solid white;
    /* outline-offset: 0px; */
}


html.width-md  [data-structure='set'] [data-view='pictures'][data-structure='entity'] {
    width: 32.3rem;
    height: 32.3rem;
    padding: 2em;
    display: inline-block;
}


html.width-lg  [data-structure='set'] [data-view='pictures'][data-structure='entity'] {
    width: 24.5rem;
    height: 24.5rem;
    padding: 2em;
    display: inline-block;
}

html.width-lg  .scroller_expanded [data-structure='set'] [data-view='pictures'][data-structure='entity'] {
    width: 17.5rem;
    height: 17.5rem;
    padding: 2em;
    display: inline-block;
}


[data-view='pictures'][data-field='image'] {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: 0;
}

[data-view='pictures'][data-structure='entity'] {
    transition: all 0.5s;
}

[data-structure='set'] [data-view='pictures'][data-structure='entity']:hover {
    z-index:10;
    box-shadow: 5px 4px 14px black;
    transform: scale(1.05);
}

[data-view='pictures'][data-structure='entity']:hover [data-field='title']  {
    margin-top: 0%;
}





/* Selections */

.s-headline-color .selected {
	color: var(--color-headline);
}

.expandable{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(0,1,0,1), opacity 0.3s;
}

.expandable.selected{
    max-height: 9999px;
    opacity: 1;
    transition: max-height 0.3s cubic-bezier(1,0,1,0), opacity 0.3s;
}

.rotatable_icon:before{
    transition: transform 0.3s;
}


.rotatable_icon.selected:before{
    transform: rotate(90deg);
}

.hideable.selected {
    display: none;
}
.showable:not(.selected) {
    display: none;
}


/**>.expandable{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(0,1,0,1), opacity 0.3s;
}

*.expanded>.expandable{
    max-height: 9999px;
    opacity: 1;
    transition: max-height 0.3s cubic-bezier(1,0,1,0), opacity 0.3s;
}

*>.rotatable_icon:before{
    transition: transform 0.3s;
}


*.expanded>.rotatable_icon:before{
    transform: rotate(90deg);
}*/



/* REPAIR FONTAWESOME */

[data-icon=""]:before{
    content: "\f2f6";
}
[data-icon=""]:before{
    content: "\f2f5";
}
[data-icon=""]:before{
    content: "\f2f5";
}

[data-icon=""]:before{
    content: "\f2f5";
}

[data-icon=""]:before{
    content: "\f304";
}

[data-icon=""]:before{
    content: "\f14a";
}

[data-icon=""]:before{
    content: "\f0c8";
}




.controllerHidden{
    position: absolute;
    white-space: nowrap;
    display: inline-block;
    /*opacity: 0 !important;*/
    max-width: 0;
    overflow: hidden;
    transition: all 0.5s;
    /*transition: max-width 0.5s, padding-left 0.5s, padding-right 0.5s;*/
    /*padding: inherit;*/
    padding-top: inherit;
    padding-right: inherit;
    padding-left: 0px;
    padding-right: 0px;
    
    left: 0px;
    top: 0px;
    height: 100%;
    /* background-color: var( --color-headline ); */
    background-color: var( --color-highlight);
    
    color: transparent;
}


*:hover>.controllerHidden{
    /* padding-left: inherit;
    padding-right: inherit; */

    padding-left: 0.1em;
    padding-right: 0.1em;
    
    max-width: 500px;
    /*max-width: 2.9em;*/
}

.controllerHidden>.showOnHoverParent{
    max-width: 10em;
    color: white;
    opacity: 1;
}



.controllerHidden>*{
    max-width: 0;
    padding-left: 0px;
    padding-right: 0px;
    transition: max-width 0.5s 0.1s, padding-left 0.25s, padding-right 0.25s, color 0.5s;
    /*opacity: 0;*/
    
/*    max-width: 500px;    */
}





.controllerHidden:hover{
    max-width: 500px;
    color: var(--color-main );
}

.controllerHidden:hover>.showOnHoverParent{
    max-width: 0px;
    padding:0px;
    color: transparent;
}




.controllerHidden:hover>*{
    max-width: 100px;
    padding-left: 0.25em;
    padding-right: 0.25em;
    /*opacity: 1;*/
}

.tabs-controller{
    /*padding: 0px;*/
    background-color: #eeeeee;
    padding-left: 25px;
    padding-right: 40px;
    color: var(--color-main);
    /*overflow: hidden;   NEEDED FOR FLOAT */
}


.tabs-controller>.controller{
    opacity: 1;
}


.tabs-controller>.controller{
    /*background-color: #666666;*/
    background-color: var(--color-main);
    color: white;
    
    text-overflow: ellipsis;
    overflow: hidden;
    /*padding-right: 3em !important;*/
    max-width: 100%;
    cursor: pointer;
    /*color: black;*/
/*    padding-top: 0.8em;
    padding-bottom: 0.3em;*/
    /*float: left;*/
    display:inline-block;
    padding: 0.65em 1em;
    text-decoration: none;
    transition: 0.5s;
    
    outline: 1px solid #ffffff1f;
    outline-offset: 0px;
}


/* ADMIN */

.tabs-controller{
    /*background-color: white;*/
}

#main_container .scroller_panel{
    box-shadow: 0px 0px 41px -4px rgba(0, 0, 0, 0.5);     
    padding: 2em;
    height: 100%;
    transition: box-shadow 1s;
}

#main_container .scroller_panel:hover{
    box-shadow: 0px 0px 41px -4px rgba(0, 0, 0, 1);     
}


#main_container .scroller_btn{
    display: none;
}

.tabs-controller>.controller.selected {
    background-color: white;
    /* color: var(--color-main); */
    background-color: var( --color-headline ); 
    
}

.tabs-controller>.controller:hover {
    /* background-color: var(--color-highlight); */
    /* color: white; */
    /* color: var(--color-highlight); */
    z-index: 2;
}


.gallery.scroller .tabs-controller{
    display: none;
}

.tab-title{
    display: inline-block;
    padding-right: 1em;
    max-width: 25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: 0.3s;
    
}
/*.tab-title:hover{
    max-width: 100%;
}*/




.scroller_panel[data-presentation="tabs"]{
    position: relative;
    /*display: block;*/
    overflow-y: auto;
}

.scroller_panel[data-presentation="tabs"]>.tab{
    display: none;
    width: 100%;
    /*top: 0px;*/
    /*z-index: 0;*/
}

.scroller_panel[data-presentation="tabs"]>.tab.selected{
    display: block;
    /*top: 0px;*/
    /*z-index: 0;*/
}













.scroller_panel[data-presentation="fader"]{
    /*display: block;*/   
    position: relative;
    /*overflow: hidden*/
}
.scroller_panel[data-presentation="fader"]>.tab{
    /*display: none;*/
    /*top: 0px;*/
    opacity: 0;
    z-index: 0;
    transition: opacity 2s;
    position: absolute;
}
.scroller_panel[data-presentation="fader"]>.tab.selected{
    display: block;
    opacity: 1;
    z-index: 1;
    /*position: relative;*/
}
.scroller_panel[data-presentation="fader"]>.tab.activating{
    display: block;
    opacity: 1;
    z-index: 2;
    /*position: absolute;*/
}


.scroller_panel[data-presentation="fader"]>.tab:last-child {
     position: relative;
}





@media print {
    @page { 
        /*size: landscape;*/
        margin: 0 !important;
    }
    
    * {
        -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
        color-adjust: exact !important;                 /*Firefox*/
    }    
}

body.printing {
    overflow: visible;    
}

body.printing *{
    transition: none !important;    
}

body.printing>*:not(.printContent){
    display: none !important;
}

body.printing .noPrint{
    display: none !important;    
}


.printContent .controller{
    visibility: hidden !important;
    
}

.printContent{
     pointer-events: none !important;    
}



[onclick]{
    cursor: pointer;
}
/* [data-exe]{
    cursor: pointer;
} */

/* [data-a="selection"]{ */
[data-a]{
        cursor: pointer;
}

.selectable{
    cursor: pointer;
}

.selectable:hover .btnSelectable, .btnSelectable:hover {
    color: var(--color-headline);
}
.btnSelectable{ cursor: pointer; margin-right: 0.75em}
.btnSelectable>.iconSelected{ display: none} 
.btnSelectable>.iconDeselected{ display: inline-block } 
.btnSelectable.selected>.iconSelected{ display: inline-block }  
.btnSelectable.selected>.iconDeselected{ display: none }

label.selectable{
    /* display: block; */
    display: flex;
    word-break: normal;
}
label.selectable input[type="checkbox"]{
    display: none;
}










.showIfPredecessorChecked{
    display: none;
}

[data-value="1"] + .showIfPredecessorChecked{
    display: block;
}



.flex{
    display: flex;
}
.flex>*{
    flex-grow: 1;
    flex-shrink: 1;    
}


.width-grow{
    flex-grow: 1;    
    width: 100%;    
}
.width-fix{
    flex-grow: 0;    
    flex-shrink: 0;    
    white-space: nowrap;    
    display: flex;    
}




.css-counter-reset{
    counter-reset: section; 
}

.css-counter::before {
    counter-increment: section;
    content: counter(section); 
}

/* p::before, p::after{
    content: ' ';
    display: table;
} */