@charset "utf-8";

@import url("fonts/open-sans/font.css");

@import url("fonts/ubuntu/font.css");

:root {
    --gap: 70px;
    --color-main: #706f6f;
    
    --color-headline: #00a5b3;
    --color-hover: #067780;

    --color-highlight: #ff7500;
    
   /* --color-highlight: var(--color-headline);*/
    --color-highlight-hover:#40CC4A;

    --navigationOffset: 64px;
    
     --col-width: 10em;
     
     --color-light: #edf7f9;

     --main-nav-height: 93px;

}

.color_headline{
    color: var(--color-headline);
}



body
{
    /* overflow-x: visible; */
    font-family: 'Open Sans', sans-serif;
    /* letter-spacing: 0.03em; */
    font-size: 17px;
    color:#706f6f;
    color: var(--color-main);
    /*font-weight: 300;*/
    font-weight: 400;
    /* padding-top: 82px; */
}

html{
    /* overflow-x: hidden; */
}

html[data-dimension="sm"] body {
    font-size: 15px;
    --gap: 50px;
}

html[data-dimension="xs"] body {
    font-size: 14px;
    padding-top: 47px;
    overflow-x: hidden;
}


html[data-dimension="xs"] {
    --gap: 25px;
    /* --gap-row: 20px; */
}


/*body.notAtTop
{
        padding-top: 90px;
}*/


html[data-dimension="xs"] body * {
    background-attachment: scroll;
}


strong {
    /* font-weight: 500; */
}
h1, h2, h3 {
            text-transform: uppercase;
}

html.width-sm body.PREVENT_SCROLLTOP #content{
	padding-top: var(--main-nav-height);
}

.noteHeader{
    background-color: white;
    color: var(--color-main);
    /* font-size: 70%; */
    --gap: 0;
    --gap-container: 1em;
    --gap-row: 0;
    /* margin-top: 3em; */
    /* margin-bottom: 3em; */
    padding-top: 0.5em !important;
    margin-bottom: 0px !important;
    border-bottom: 8px solid var(--color-highlight);
    text-align: center;
}
html.width-sm .noteHeader{
    /* margin-top: var(--main-nav-height) !important; */
}

.noteHeader [data-module="Picture"]{
    /* width: 16em; */
}


.noteAccountIncomplete {
    /* position: absolute; */
    /* margin-top: 3px; */
    width: 100%;
    padding: 1em;
    text-align: center;
    color:  white;
    /* color: var(--color-headline); */
    background-color: var(--color-highlight);
    /* font-size: 70%; */
    /* z-index: -2; */
}
.noteAccountIncomplete a {
    color: inherit !important;
    /* font-weight: bold; */
    /* text-decoration: none !important; */
}




body.page_edit-object .noteHeader,
body.page_account .noteHeader,
body.page_new-auction .noteHeader
{
    display: none;
}



h1 {
    color: var( --color-headline );
    position: relative;
    font-weight: bold;
}


h1 .highlight{
    font-size: 60%;
    display: inline-block;
    line-height: 170%;
    margin-top: 0.3em;
    color: var(--color-main);
    font-weight: 500;
    text-transform: none;
}

html[data-dimension="xs"] #content h1 {
    margin-left: auto;
    margin-right: auto;
    font-size: 1.8em;
    /* margin-bottom: 2.5em; */
    /* margin-top: -2.5em !important; */
}


.header h1 {
    /* padding: 0em 0.5em; */
    /* margin-left: -0.5em; */
    /* display: inline-block; */
    text-shadow: 0.05em 0.05em 0.56em rgb(0 0 0 / 70%);
    position: absolute !important;
    bottom: 4em;
    /* left:  0px; */
    color: rgb(255 255 255 / 98%);
    font-size: 4.5rem;
    min-width: 10em;
}

.header {
	height: 70rem;
	/* min-height:  100vh; */
	min-height: 75vh;
	height:  auto;
}

.header>div:nth-child(1):after {
	content: "  ";
	display: block;
	position:absolute;
	top: 0px;
	width: 100%;
	/* background: linear-gradient(180deg,rgba(0,0,0, 0.3) 10%, rgba(0,0,0, 0.0) 95%); */
	/* background: linear-gradient(177deg,rgb(0 165 179 / 50%) 10%, rgb(255 255 255 / 0%) 72%); */
	/* background: linear-gradient(177deg,rgb(154 185 218) 10%, rgb(255 255 255 / 0%) 72%); */
	background: linear-gradient(177deg,rgb(124 194 228) 10%, rgb(255 255 255 / 0%) 72%);
	background: linear-gradient(177deg,rgb(82 162 202) 0%, rgb(255 255 255 / 0%) 72%);
	background: linear-gradient(177deg,rgb(71 143 179 / 62%) 0%, rgb(255 255 255 / 0%) 72%);
	left: 0px;
	height: 36rem;
	height: 57rem;
	/* background-color:blue; */
	pointer-events: none;
}
.header + div {
    box-shadow: 0px -2px 6px #0000001c;	
}
.header_autosize {
    /* min-height: 100vh; */
}

.header_autosize>div:nth-child(2) {
    padding-top: 30rem;
    color: white;  
    padding-bottom: 3em;  
}
.header_autosize h1  {
    text-shadow: 0.05em 0.05em 0.56em rgb(0 0 0 / 70%);
    color: white;
    font-size: 4.5rem; 
}

.header_autosize h2, .header_autosize h3  {
    color: white;
}



.header_autosize>div:nth-child(1):after {
	content: "  ";
	display: block;
	position:absolute;
	top: 0px;
	width: 100%;
	/* background: linear-gradient(180deg,rgba(0,0,0, 0.3) 10%, rgba(0,0,0, 0.0) 95%); */
	/* background: linear-gradient(177deg,rgb(0 165 179 / 50%) 10%, rgb(255 255 255 / 0%) 72%); */
	/* background: linear-gradient(177deg,rgb(154 185 218) 10%, rgb(255 255 255 / 0%) 72%); */
	background: linear-gradient(177deg,rgb(124 194 228) 10%, rgb(255 255 255 / 0%) 72%);
	background: linear-gradient(177deg,rgb(82 162 202) 0%, rgb(255 255 255 / 0%) 72%);
	background: linear-gradient(177deg,rgb(71 143 179 / 62%) 0%, rgb(255 255 255 / 0%) 72%);
	left: 0px;
	height: 36rem;
	height: 57rem;
	/* background-color:blue; */
	pointer-events: none;
}



h2 {
    /*color: #87b5b3;*/
    color: inherit;
}

h2  {
    color: var(--color-headline);
    font-size: 1.4em;
    text-transform: uppercase;
    font-weight: bold;
}
h2 .highlight{
    text-transform: none;
}


h3{font-size: 1.2em;font-weight: normal;}

#content h1+h2 {
     margin-top: 0em !important;
    
}


#content p+h3, #content  ul+h3{
    /* margin-top: 3em; */
}


p, ul {
    line-height: 1.5em;            
}

a, button {
    text-decoration: none;
    color: var(--color-headline);
    font-weight: 400;
    transition: color 0.5s, opacity 0.7s;  /* GETS OVERWRITTEN BY BLINK OTHERWISE */
}
a:hover, button:hover{
    /*text-decoration: none;*/
    text-decoration: underline;
    /* text-decoration-style:dotted; */
    color: var(--color-hover);
}

/*
button {
    transition: all 0.5s;
}

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


/*
#content a {
    font-weight: 500;
}
*/
.bordered a{
	line-height: 1.2em;
	/* padding-top: 0px; */
	padding-bottom: 0.5em;
	display: inline-block;
}

.mainNav li>a {
	text-decoration:none;
	/* text-shadow: 0.05em 0.05em 0.5em rgb(0 0 0 / 35%); */
	/* text-shadow: 0.05em 0.05em 0.9em rgb(0 165 179); */
	text-shadow: 0.05em 0.05em 0.4em rgb(0 95 103 / 60%);
}

body.notAtTop .mainNav a {
    text-shadow: none;
}
/*#content a {
    
}*/
/*

#mainHeader
{
	height:186px;
	margin-bottom: -9px;  
	margin-top:50px;	
	background-size:100% 100%;
	background-image: url(gfx/header_panel_pattern.png);
	z-index:60; 		
}*/

#btnNavToggle, #btnLoginToggle {
    background-color: var(--color-headline);
}

.logo_text {
    /* display:  none; */
    /* line-height: 101px; */
    padding-left: 4.7em;
    z-index: 11;
    /* z-index: unset; */
    position: absolute;
    font-size: 50px;
    font-size: 80px;
    font-weight: normal;
    color: white;
    transition: all 2s;
    bottom: 22px;
    /* text-shadow: 2px 2px 2px black; */
    /* pointer-events: none; */
    font-size: 32px;
    padding-left: 1.75em;
    text-decoration: none !important;
}
.logo_text:hover {
	color: white;
}

.logo_text_connect {
	color: rgba(255, 255, 255, 0.6);
	/* color: #bdbdbd; */
	/* transition: all 2s; */
	/* transition: none; */
	/* transition: inherit; */
	transition: color 2s;
}
.logo_text:hover .logo_text_connect{
	/* color: white; */
}

html[data-dimension="sm"] .logo_text {
    font-size: 25px;
    bottom: 14px;
    padding-left: 3em;
}

html[data-dimension="md"] .logo_text {
    font-size: 28px;
    padding-left: 3em;
}

body.notAtTop .logo_text {
    color: var(--color-headline);
    /*font-size: 32px;*/
    /* padding-left: 2.5em; */
    /* pointer-events: all; */
}
body.notAtTop .logo_text_connect {
	color: #bdbdbd;
}


.logo
{
    position:absolute;
    left:0px;
    /*top: 67px;*/
    /* opacity: 1; */
    /* transition: opacity 0.5s, width 0.5s, height 0.5s, left 0.5s, bottom 0.5s, margin 0.5s; */
    /*width: 424px;*/
    z-index: 10;
    transition: all 2s;
    bottom: 14px;
}
.logo img {
    height: 100%;
    width: auto;
}

html[data-dimension="md"] .logo {
    height: 59px;
    top: 12px;
}

html[data-dimension="lg"] .logo {
    height: 5em;
    height: 9em;
    height: 17rem;
    margin-left: 116px;
    margin-left: -20px;
    height: 68px;
    height: 68px;
}

html[data-dimension="lg"] body.notAtTop .logo {
    /* top: 8px; */
    bottom: 14px;
    height: 68px;
    /* font-size: 70%; */
    width: 370px;
    margin-left: -20px;
    transform: scaleX(1);
}


html[data-dimension="sm"] .logo {
    height: 51px;
    top: 3px;
    /* margin-left: -2em; */
}


.button
{
	display:inline-block;
	/*	padding:20px;
	padding-top:15px;
	padding-bottom:15px;*/
	padding: 1em 1.5em;
	background-color: var(--color-headline);
	/* background-color: var(--color-main); */
	color:white;
	text-decoration:none;
	border-radius: 2px;
	margin-top: 0.4em;
	margin-bottom: 0.4em;
	/*border-left: 1em solid #65d1cd;*/
	transition: background-color 0.5s, color 0.5s, padding-left 0.5s, padding-right 0.5s,     opacity 0.7s, transform 0.5s !important;  /* GETS OVERWRITTEN BY BLINK OTHERWISE */
	position: relative;
	z-index: 1;
	border-radius: 3px;

	text-transform: uppercase;
}
.button:hover
{
	background-color: var(--color-hover);
	text-decoration:none;
	color: white;
}


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


.bg_headline a {
	color:white;
	text-decoration: underline;
}

.bg_headline .button{
	background-color:white;
	color: var(--color-headline);
	text-decoration:none;
}
.bg_headline .button:hover
{
	background-color: var(--color-hover);
	color: white;
}







.button:hover:after
{
    max-width: 100%;
}



.mainNav{
    position: fixed;
    /* position: sticky; */
    width: 100%;
    top: 0px;
    /*height: 210px;*/
    /*height: 164px;*/
    /*height: 13rem;*/
    height: var(--main-nav-height);
    /*height: 150px;
    height: 250px;
    height: 26rem;
    height: 93px;*/
    z-index: 100;
    /* box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15); */
    background-color: transparent;
    font-size: 130%;
    color: rgba(255, 255, 255, 0.8);
    /* color:  #b6c9df; */
    transition: background-color 4s, font-size 2s, height 2s;
}


body.notAtTop .mainNav{
    background-color: white;
    /* border-bottom: 3px solid #edf7f9; */
    color: inherit;
    --nav-height: 93px;
    /* font-size: 110%; */
    box-shadow: 0px 2px 6px #0000001c;
}

html[data-dimension="xs"]{
	--main-nav-height: 47px;
}

html[data-dimension="sm"]{
	--main-nav-height: 63px;
}

html[data-dimension="md"] {
    --main-nav-height: 84px;
}
.mainNav>div>div>ul{
    /* padding-right: 5em; */
}

.mainNav ul{
    /*margin-top: 110px;*/
    /* bottom: 0px; */
    padding-top: 29px;
    /*padding-left: 202px;*/
    text-align: right;
    width: 100%;
    position: absolute;
    margin-left: 1em;
}

html[data-dimension="sm"] .mainNav ul{
    padding-top: 4px;
}

.mainNav li{
    display: inline-block;
}


.mainNav li>a{
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    padding-left: 0.75em;
    padding-right: 0.75em;
    padding-bottom: 1em;
    padding-top: 1em;
    color: inherit;
    transition: all 0.5s;
    /* font-family: ubuntu; */
}



html[data-dimension="sm"] .mainNav li>a{
    padding-right: 0.5em;
    padding-left: 0.5em;
    font-size: 70%;
    /* text-transform: lowercase; */
    /* letter-spacing: 0.08em; */
}


html[data-dimension="md"] .mainNav li>a{
    padding-left: 1em;
    font-size: 81%;
}


.mainNav li:hover>a{
    color: white;
}

.mainNav li.active>a{
    color: white;
}


body.notAtTop .mainNav li:hover>a{
    color: var(--color-headline);
}

body.notAtTop .mainNav li.active>a{
    color: var(--color-headline);
}

body.notAtTop .mainNav li.active li.active>a{
    /* color: var(--color-highlight); */
    color: white;
}






.mainNav li ul{
    display: block;
    /*padding: 15px;*/
    transition: max-height 1s;
}

body:not(.group_ALL-USERS) .mainNav [data-page="mieter"] ul{
    display: none !important;
}
body:not(.group_ALL-USERS) #nav_mobile [data-page="mieter"] ul{
    display: none !important;
}

body:not(.group_ALL-USERS) [data-page-identifier="vendor"]{
    display: none !important;
}

body:not(.group_partners) [data-page-identifier="partner"]{
    display: none !important;
}
body.group_ALL-USERS [data-page="faq"]{
    display: none !important;
}
body:not(.group_vendors) [data-page-identifier="vendor"]{
    display: none !important;
}




html.width-sm .mainNav li ul{
    position: absolute;
    background-color: rgba(255,255,255,0.9);
    color:  var(--color-main);
    /* background-color: #edf7f9; */
    max-height: 0px;
    overflow: hidden;
    padding-top: 0px;
    font-size: 80%;
    margin-top: 3px;
    width: 14em;
    transform: translate(-50%, -0%);
    left: 50%;
    margin-left: 0px;
    background-color: var(--color-headline);
    background-color: #5c7582;
    background-color: #5c7582;
    background-color: rgb(92 117 130 / 85%);
    color: #ffffffc4;
    text-shadow: none;
    box-shadow: 4px 8px 11px #00000070;
}

html.width-md .mainNav li ul{
	margin-top: -14px;
}

html[data-dimension="xs"] .mainNav li ul{
 
    /*padding-top: 17px;*/
    padding-left: 1em;
    font-size: 90%;
}


html.width-sm .mainNav li:hover ul{
    max-height: 700px;
    /* background-color: rgba(255,255,255,0.8); */
}

.mainNav li ul li{
    display: block;
}
html.width-sm .mainNav li ul li a{
    padding: 0.7em;
    width:  100%;
    text-align: center;
    border-top: 1px solid #657e8c;
    border-bottom: 1px solid #4e6571;
    background: linear-gradient(171deg, #ffffff12, transparent 51%);
    /* background-color: var(--color-headline); */
    /* transition: background-color 0.5s, border 0.5s; */
}


html.width-sm .mainNav ul ul li:hover>a{
    background-color: #4e6571;
    border-top: 1px solid #426171;
}







#nav_mobile {
    width: 100%;
    position: fixed;
    top: 43px;
    z-index: 99;
    display: none;
}

#header_mobile {
    position: fixed;
    width: 100%;
    height: 47px;
    line-height: 47px;
    padding-right: 9px;
    /*background-color: #232323;*/
    /*background-color: var(--color-highlight);*/
    /* background-color: #ac0018; */
     background-color: white; 
    /*box-shadow: 0px 5px 11px black;*/
    /*box-shadow: 0px 5px 3px rgba(102, 209, 206, 0.4);*/

    /*box-shadow: 0px 5px 11px rgba(0, 0, 0, 0.3);*/

    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    
    color: white;
    /* color: black; */
    z-index: 100;
    top: 0px;
    border-bottom: 5px solid var(--color-light);
/*    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;*/
    
    /*border-bottom: 5px solid var(--color-main);*/ 
}

#nav_mobile>ul {
    /*background-color: #232323;*/
    background-color: #edf7f9;
    padding-top: 1em;
    box-shadow: 0px 5px 11px rgba(0, 0, 0, 0.3);
}

#nav_mobile ul ul {
     display: block; 
}

#nav_mobile>ul>li {
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid #f1fdff;
    border-bottom: 1px solid #c2e9f1;
}

#nav_mobile li a {
    /*text-decoration: none;*/
    font-weight: 300;
    /* font-weight: 400; */
    font-size: 13px;
    display: block;
    padding-left: 12rem;
    padding-right: 10rem;
    padding-top: 0.0em;
    padding-bottom: 0.0em;
    text-transform: uppercase;
    

}





#nav_mobile>ul>li>a {
    color: var(--color-headline);
    font-size: 13px;
    display: block;
    padding-left: 10rem;
    padding-right: 10rem;
    text-transform: uppercase;
    font-weight: 500;
}

#nav_mobile ul ul li a {
    color: inherit;
}





#header_mobile .logo{
    width: auto;
    position: absolute;
    left: 20px;
    top: 1px;
    bottom: 0px;
    height: auto;
    max-width:  10px;
}



a.customer_login {
    position: absolute;
    right: 0px;
    top: 35px;
    text-transform: uppercase;
    background-color: var(--color-hover);
    /*transition: top 0.5s, background-color 0.5s, font-size 0.5s, border-radius 3s;*/
    transition: top 0.5s, background-color 0.5s, font-size 0.5s;
    transition-delay: 0.2s;
    font-size: 75%;
    padding: 0.4em 1em;
    border-radius: 2px;
    color: white;
}
a.customer_login:hover {
    /*background-color: var(--color-main);*/
}
body.notAtTop .customer_login{
/*border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;*/
    /* border-radius: 2px; */
    top: -1px;
    /*font-size: 60%;*/
}


.bg_inverse a {
    color: var(--color-headline);
}




#layout_bottom {
    text-transform: uppercase;
    font-size: 80%;
}
#layout_bottom a {
    /* color: inherit; */
    text-decoration: none;
    /* font-weight: 400; */
    /* letter-spacing: 0.2em; */
    transition: color 0.5s, opacity 0.7s, transform 0.5s !important;  /* GETS OVERWRITTEN BY BLINK OTHERWISE */
}
#layout_bottom a:hover {
    text-decoration: underline;
    text-decoration-style:dotted;  
}

#layout_bottom h2, #layout_bottom h3  {
    color: var(--color-headline);
    font-weight: normal;

}
#layout_bottom h2{
    font-size: 1.2em;
    font-weight: bold;
}

#layout_bottom h3  {
    font-size: 1em;
    
}


.parallax-window {
    min-height: 500px;
    height: 75vh;
    padding-top: 3em;
    padding-bottom: 3em;
    
}


.parallax-mirror {
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        opacity: 0.2;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        opacity: 0.2;
    }

    100% {

        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}



.boxed [data-module="Html"]{
    background-color: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding: 2em;
    height: 100%;
    border-radius: 2px;
    box-shadow: 1px 1px 14px rgb(0 0 0 / 30%);
    /* box-shadow: 1px 1px 7px #00a4b2; */
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    /*    max-width: 300px;
    margin: auto;*/
}
.boxed [data-module="ContainerItem"]{
    padding: 2em;
}

.box {
    background-color: var(--color-light);
    padding: 2em;
    margin-top: 2em;
    margin-bottom: 2em;
}

[data-module="Html"] img, .box {
    border-radius: 2px;
}

.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-hover); */
    position: absolute;
    margin-left: -1.5em;
    font-size: 130%;
}
.li_check li li:before{
    content: '\f0da';
    margin-left: -1em;
}


.icon_decoration{
    font-size: 300%;
    margin: auto;
    display: block;
    background-color: var(--color-hover);
    border-radius: 100%;
    width: 1.75em;
    height: 1.75em;
    line-height: 1.75em;  
    text-align: center;
    position: relative;
}

.icon_decoration:before{
    width: 1.75em;
/*    height: 1.75em;
    margin-left: 0;    */
}




.border-top {
    /*border-top: 5px solid #5383b7;*/
    /*border-top: 5px solid #e8e8e8;*/
    border-top: 1px solid var(--color-headline);
}
.border-bottom {
    /*border-bottom: 5px solid #5383b7;*/
    /*border-bottom: 5px solid #e8e8e8;*/
    border-bottom: 3px solid var(--color-headline);
}

.contact_form input[type="text"], .contact_form textarea {
    width: 25em;
    max-width: 100%;
    padding: 0.5em;
    /*border: 1px solid var(--color-highlight);*/
    /*color: var(--color-main);*/
    color: var(--color-main);
    background-color: white;
    margin-top: 0.25em;
    margin-bottom: 1.5em;
    border: 1px solid var(--color-hover);
    border-radius: 2px
}
.contact_form textarea {
    height: 12em;
}


.contact_form input[data-valid="false"], .contact_form textarea[data-valid="false"] {
    color: red;
    border: 1px solid red;
}





.flexlist {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1em;
    margin-right: -1em;
}

.flexlist>*{
    padding: 2em;
    background-color: var(--color-light);
    margin: 1em;
    flex: 1 1 340px;
    border-left: 0.5em solid var(--color-hover);
    border-radius: 2px;
    /*padding-left: 2.5em;*/   
    text-align: center;
}


.permission_dialog {
    text-align: center;
    padding: 2em 3rem;
    width: 700px;
    max-width: 80rem;
    max-height: 90vh;
    background-color: white;
    overflow-y: auto;
}

.permission_dialog h1, .permission_dialog h2 {
    margin-top: 0px !important;
}

.permission_type_panel .checkContainer {
    float: left;
    padding-top: 0.4em;
    padding-right: 3rem;
    width: auto;
}

.permission_logo {
    width: 15em;
    height: auto;
    margin-top: 1em;
    margin-bottom: 1.5em;
}
.permission_type_panel input[type="checkbox"] {
    transform: scale(2);
}

.permission_type_panel {
    padding: 1em;
    background-color: #f9f9f9;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-align: left;
}

.permission_type_panel .permission_title {
    font-weight: bold;
    font-size: 120%;
}
.permission_type_panel .infoContainer {
    overflow: hidden;
}

.permission_type_panel {
    padding: 1em;
    background-color: #f9f9f9;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-align: left;
}


.blink, h1[observer-scroll]{
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.7s, transform 0.5s;  
}

.blink[observed-visible="true"], h1[observed-visible="true"]{
    opacity: 1;
    transform: scale(1);    
}

.blink_slow{
    opacity: 0;
    transition: opacity 3s;  
}
.blink_slow[observed-visible="true"]{
    opacity: 1;
}



[observer-scroll]{
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.7s, transform 0.5s;  
}

[observed-visible="true"]{
    opacity: 1;
    transform: scale(1);    
}


.priceLine{

text-transform: uppercase;

display: block;

color: var(--color-headline);

position: relative;

margin-bottom: -0.8em;

margin-top: 1.6em;
}

.priceLine:after{
    content: "";
    height: 1px;
    left:  0px;
    right:  0px;
    bottom: 3px;
    position: absolute;
    background-color: var(--color-headline);
}

.priceValue{

float: right;
}

.bordered{
    outline: 1px solid var(--color-headline);
}

.minibox{
   padding: 0.4em 0.7em;
   position: absolute;
   margin:auto;
   left: 50%;
   transform: translate(-50%, 0%);
   white-space: nowrap;
}


.framed{
    outline: 1px solid var(--color-headline);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
}

.happy_ager {
    position: relative;
}

.happy_ager:after{
    content:"";
    display: block;
    width: 80px;
    height: 100px;
    max-width: 19rem;
    background-repeat:  no-repeat;
    background-image: url('../files/images/button_happyager.png');
    position: absolute;
    background-size: contain;
    bottom: -1em;
    right: 0px;
    background-position: bottom right;
}

.light_box {
    padding-bottom: calc(var(--gap)*0.2);
    background-color: var(--color-light);
    outline: 1px solid var(--color-headline);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
}

.light_box>* {
    padding-left: calc(var(--gap) * 0.5);
    padding-right: calc(var(--gap) * 0.5);
    
}

#row_start {
    --gap-container: 1.5em;
}

#row_start [data-module="Html"] {
    height: 100%;
}
#row_start [data-module="Html"]>* {
    height: 100%;
}
#row_start .bordered {
    padding:1em;
    transition: transform 0.5s;
}

#row_start .bordered:hover {    
    transform: scale(1.05);
}
#row_start [data-module="Picture"] {    
   cursor: pointer;
}


#partner_panel{
    --gap-container: 10rem;
}


#partner_panel [data-module="Picture"]{
    min-height: 100%;
    background-size: contain;
}

.footer_icon {
    border-radius: 4px !important;
    width: auto;
    height: 2.2em;
    /* position: absolute; */
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}

html:[data-dimension="lg"]{
    position: absolute;    
}

.logo_row [data-module="Picture"]{
    background-size: contain;
    height: 100% !important;

}
.logo_row [data-module="ContainerItem"]{
    flex-grow: 1;
    max-width: 35rem;
}

.permission_denied{
    padding: 2em;
}




.smallNote {
	font-size: 75%;
	margin-top: 1em;
	margin-bottom: 1em;
}








.login_group {
    /*background-color: var(--color-main);*/
    background-color: white;
    padding: 1em;
    margin: 1em auto;
    max-width: 500px;
    border: 1px solid var(--color-headline);
    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);
    transition: background-color 0.5s;
    /*color: white;*/
    width: 700px;
    max-width: 100%;
    border-radius: 2px;
}
/*.login_window.scroll_panel .modalPanel {
    background-color: transparent; 
    max-width: 500px;
    margin: auto;
}*/
.login_group strong {
    color: var(--color-headline);
    padding: 0.7em;
    display: inline-block;
}
.login_window.scroll_panel .modalPanel {
    background-color: transparent;
    max-width: 500px;
    margin: auto;
    pointer-events: none;
    padding: 0;
}
.login_window.scroll_panel .modalPanel>* {
    pointer-events: initial;
    width: 100%;
}

.login_group input{
    padding: 0.5em 1em;
    border-radius: 2px;
    border: 0px none;
    margin-bottom: 1em;
    margin-top: 0.5em;
    background-color: var(--color-headline);
    border:  1px solid var(--color-headline);
    color: white;
    text-align: center;
}






button.btnInfo{
 


}
button.btnInfo:before{
    content: '\f05a';
	width: 1em;
    display: inline-block;
    font-weight: normal;
    text-align: center;
    font-family: "FontAwesome";
    min-width: 1em;

}










.btnNew{
    line-height: 1em;
    background-color: white;
    font-size: 200%;
    padding: 0.5em;
    border-radius: 5em;
    max-width: 2em;
    white-space: nowrap;
    overflow: hidden;
    float: right;
    transition: max-width 1s, color 1s, background-color 1s;
}

.btnNew	span {
	display: inline-block;
	padding-left: 1em;
	font-size: 50%;
}

.btnNew:hover{
    max-width: 20em;
    background-color: var(--color-headline);
    color: white;
}


.faq ul{
	
}



.faq li{
    background-color: white;
    padding: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.faq h3{
	text-transform:none;
	color: var(--color-headline);
	margin-bottom:1em;
	display:block;
}

.code_panel{
	padding:2em;
	color: white;

	background-color:var(--color-highlight)


}

/*

[data-module="Picture"] img {
	object-fit: contain;
	object-position: bottom;
	font-family: 'object-fit: contain; object-position: bottom;';
}
*/

.light_bg .background.fix{
    opacity: 0.2;
}

.responsive-container{
    width: 100%;	
}

html.width-sm .responsive-container{
    width: 50%;	
}

.auction-label {
    position: absolute;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    top: 1em;
    left: 1em;
    padding: 0.5em 1em;
    color: white;
    background-color:  var(--color-headline);
}

.auction-label:after {
	content: " ";
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(133deg, rgba(255,255,255, 0.2) 50%, rgba(255,255,255,0) 50%);
}


.auction-label-new {
}

.auction-label-hot {
    background-color:  var(--color-highlight);
}


.auctions [data-structure="entity"] {
    background: linear-gradient(144deg, rgba(255,255,255,1) 50%, rgba(0,165,179,0.03) 80%);
    background-color: white;
    padding: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.auctions .auction-container{
    display: flex;
    flex-wrap: wrap;
}


.auctions  [data-template="auctions-set"]  .image-container {

/* padding: 1em; */

width: 50%;

flex-grow: 0;

flex-shrink: 0;

max-width: 400px;

/* max-height: 400px; */

min-height: 410px;
}


.auctions .content-container {

width: 50%;

flex-grow: 1;

flex-shrink: 1;
padding-left:2em;
}


html[data-dimension="xs"]  .auctions .image-container {
        width: 100%;
        margin-bottom: 2em;
    }
html[data-dimension="xs"]    .auctions .content-container {
        width: 100%;
        padding: 0em;        
        padding-top: 1em;
    }
html[data-dimension="xs"]    .auctions .auction-container{
		flex-wrap: wrap;
    }





.auction_timer {
	display: inline-block;
}

.timeticker div{
	display: inline-block;
}

.timeticker .digits.last-minute{
	color: var(--color-highlight);
}

.timeticker .digits.last-minute .digit_group{
	display: none;
}

.timeticker .digits.last-minute .seconds{
	font-size: 150%;
	display: inherit;
}





.timeticker .digit_group:after{
    position: absolute;
    color: inherit;
    left: 0px;
    font-size: 45%;
    bottom: -1.5em;
    width: 100%;
    color: var(--color-headline);
}


.timeticker .digit_group{
    /* font-weight: bold; */
    display: inline-block;
    margin: 0.9em;
    position: relative;
    margin-top:  0px;
    margin-bottom: 0.2em;
    /* font-size: 116%; */
}

.timeticker .digit_group.days:after{
    content: "Tage";
}
.timeticker .digit_group.hours:after{
    content: "Stunden";
}
.timeticker .digit_group.minutes:after{
    content: "Minuten";
}
.timeticker .digit_group.seconds:after{
    content: "Sekunden";
}








.auction_title, .product_title{
    font-size: 110%;
    font-weight: bold;
    color: var(--color-headline);
}
.auction_title>*, .product_title>*{
	display: inline;
}


.auctions [data-field="id"]{
    display: none;
}

.auctions [data-field="bid_current"], .auctions [data-field="buyout"]{
    font-weight: bold;
    display: inline-block;
    font-size: 160%;
    color: var(--color-highlight);
}

@media(max-width: 470px){
	.auctions [data-field="bid_current"], .auctions [data-field="buyout"]{
		/* display: block; */
		/* margin-bottom: 0.5em; */
	}
}


.auctions [data-field="bid_current"]:after, .auctions [data-field="buyout"]:after{
    content: " Euro";
}

.auctions [data-field="buyout"]{
    min-width: 7em;
    padding-top: 0.3em;
    margin-bottom: 0.5em;
}

[data-variant="auctions-owner"] [data-field="bid_current"] {
    font-size: inherit !important;
}



.auctions .your-offer, .auctions .buyout_container{

position: relative;

padding: 1em;

background-color: var(--color-light);

margin-top: 0.5em;

margin-bottom: 0.5em;
}

.auctions .your-offer-label{
    font-weight:bold;
    /* font-size: 70%; */
    /* font-style: italic; */
    /* margin-top: -1.2em; */
}

.auctions .bidInput {
	border: 1px solid var(--color-headline);
	width: 7em;
	margin-right: 4em;
	padding: 0em;
	text-align: center;
	line-height: 2.75em;
    margin-bottom: 0.5em;
}

.comment {
    font-size:70%;
    font-style: italic;
}

.buyout_container .comment {
    margin-top: -1.2em;
}

.auctions .info-container {
	margin-bottom:1em;
}

.auctions .info-timespan {
	font-size: 85%;
	font-weight: bold;
}

.auctions .container_auction_end{
	font-size: 85%;
}

.auctions [data-field="image"]{
    height: 75%;
    margin-bottom: 1em;	
}

/*

.auctions .container-current{
	margin-bottom:0.5em;
	display: block;
	width: auto;
	display: inline-block;
	background-color: var(--color-headline);
	color:  white;
	padding: 0.7em;
	padding-left: 3em;
	margin-left: -3em;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	
	position: relative;
}



*/

.auctions .container-current{
	margin-bottom:0.5em;
	position: relative;
}
/*
.auctions .container-current:before{
	content: "\f177";
	font-family: "FontAwesome";
	position: absolute;
	top: -6px;
	left: 0px;
	margin-top: -0.34em;
	margin-left: -0.45em;
	font-size: 18em;
	line-height: 1em;
	color: var(--color-headline);
	text-shadow: 2px 3px 5px #0000004f;
}
*/

/*
.auctions .btnBid {
    position: absolute;
    text-transform: uppercase;
    bottom: 0.7em;
    margin-bottom: 0px;
}
*/

.auctions [data-field="image"] img {
    transition: transform 5s;
    transition-timing-function: ease-in-out;
    transform: scale(1.0);
}

.auctions [data-structure="entity"][data-view="auctions"]:hover [data-field="image"] img {
    transform: scale(1.1);
}

.info_certification{
    font-size: 80%;
    color: #ff7500;
    display: none;
}

.attribute-container>div{
	/* font-size: 80%; */
	display: inline-block;
    color: var(--color-highlight);
}
.attribute-container>div:not(:last-child)::after{
	content: ' |';
}

/* .attribute-container [data-field="product_city"]{
    color: var(--color-highlight);
} */


.person-container>div{
	display: inline-block;
    visibility: hidden;
}


.person-container [data-field="units"]::before{
	display: inline-block;
    font-family: "FontAwesome";
    font-weight: normal;
    visibility: visible;
}
.person-container [data-field="units"][data-value="1"]::before {content: "\f007"; }
.person-container [data-field="units"][data-value="2"]::before {content: "\f007\f007"; }
.person-container [data-field="units"][data-value="3"]::before {content: "\f007\f007\f007"; }
.person-container [data-field="units"][data-value="4"]::before {content: "\f007\f007\f007\f007"; }
.person-container [data-field="units"][data-value="5"]::before {content: "\f007\f007\f007\f007\f007"; }
.person-container [data-field="units"][data-value="6"]::before {content: "\f007\f007\f007\f007\f007\f007"; }
.person-container [data-field="units"][data-value="7"]::before {content: "\f007\f007\f007\f007\f007\f007\f007"; }
.person-container [data-field="units"][data-value="8"]::before {content: "\f007\f007\f007\f007\f007\f007\f007\f007"; }
.person-container [data-field="units"][data-value="9"]::before {content: "\f007\f007\f007\f007\f007\f007\f007\f007\f007"; }
.person-container [data-field="units"][data-value="10"]::before {content: "\f007\f007\f007\f007\f007\f007\f007\f007\f007\f007"; }


.iconType[data-field="type"] {
    white-space: nowrap;
    width: 1.2em;
    overflow: hidden;
    display:inline-block;
}
.iconType[data-field="type"]::before  {
    font-family: "FontAwesome";
    margin-right: 1em;
    min-width: 1em;
    width: 1em;
    display: inline-block;
    font-weight: normal;
    text-align: center;
}

.iconType[data-field="type"][data-value="10"]::before {
	content: "\f015";
}


.iconType[data-field="type"][data-value="20"]::before {
	content: "\f594";
}

.iconType[data-field="type"][data-value="30"]::before {
	content: "\f5de";
}

.iconType[data-field="type"][data-value="50"]::before {
	content: "\f818";
}

.iconType[data-field="type"][data-value="60"]::before {
	content: "\f21a";
}

.iconType[data-field="type"][data-value="70"]::before {
    content: "\f55e";
}

.iconType[data-field="type"][data-value="90"]::before {
	content: "\f21a";
}

.auctions .container-current-bid  {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}



.auctions .winning .container-current-bid  {
	background-color: #fff0d8;
	/* color:  white; */
	padding: 1em;
}


.ifWinning {
	display: none;
    font-weight: bold;
}

.winning .ifWinning {
	display: block;
}




.winning .ifNotWinning {
	display: none;
}




[data-structure="entity"][data-variant="auctions-owner-set"]{
    outline: 2px solid var(--color-headline);
}




.modalBG {
    /* background-color: #282828; */
    /* background-color: var(--color-headline);;/* background-image: url(../files/images/500/aron_visuals_HciQohInvKU_unsplash.jpg); */
    background-color: var(--color-headline);
    /* background-size: cover; */
    /* background: linear-gradient(157deg, rgba(0,165,179,1) 0%, rgba(0,165,179,0.2) 100%); */
    background: linear-gradient(
157deg
, rgba(0,165,179,1) 0%, #3e3e3e 100%);
}




.itemList [data-structure="entity"] {
    transition: box-shadow 0.5s;
}

.itemList [data-structure="entity"]:hover {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}


.itemList .product-container{
    display: flex;
    flex-wrap: wrap;
}
.itemList .image-container {flex-grow: 0;flex-shrink: 0;max-width: 400px;max-height: 400px;margin-bottom: 2em;}
.itemList [data-variant="observations_of_user"] .image-container{
    max-width: 200px;
    max-height: 222px;
}



.itemList .content-container {
width: 50%;
flex-grow: 1;
flex-shrink: 1;
padding-left:2em;
}


.itemList [data-field="type"] {
    /* background-color: var(--color-headline); */
    color: transparent;
    width: 0px;
    font-weight: bold;
    /* position: absolute; */
    /* top:  0px; */
    /* left:  0px; */
    width:  100%;
    font-size: 130%;
    /* padding: 1em 2em; */
    white-space: nowrap;
}

.itemList [data-field="type"][data-value="10"]::before {
    content: "\f015";
}
.itemList [data-field="type"][data-value="10"]::after {
    content: "Ferienwohnung";
}
.itemList [data-field="type"][data-value="20"]::after {
    content: "Hotelzimmer";
}
.itemList [data-field="type"][data-value="20"]::before {
    content: "\f594";
}


.itemList [data-field="type"][data-value="30"]::after {
    content: "Automobil";
}
.itemList [data-field="type"][data-value="30"]::before {
    content: "\f5de";
}


.itemList [data-field="type"][data-value="50"]::after {
    content: "Dinner";
}
.itemList [data-field="type"][data-value="50"]::before {
    content: "\f818";
}


.itemList [data-field="type"][data-value="60"]::after {
    content: "Schifffahrt";
}

.itemList [data-field="type"][data-value="60"]::before {
    content: "\f21a";
}

.itemList [data-field="type"][data-value="70"]::after {
    content: "Wohnmobil";
}
.itemList [data-field="type"][data-value="70"]::before {
    content: "\f55e";
}



.itemList [data-field="type"]::before {
    font-family: "FontAwesome";
    margin-right: 0em;
    min-width: 1em;
    width: 1em;
    display: inline-block;
    font-weight: normal;
    text-align: center;
    color: var(--color-headline);
}
.itemList [data-field="type"]::after {
	position: absolute;
	left: 1.5em;
	color: var(--color-headline);
}



.itemList>ul>[data-structure="entity"] {
    background-color: white;
    padding: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
    /* padding-top: 5em; */
    border: 1px solid #c3c0c0;
    border-radius: 3px;
}



.itemList [data-field="text"]{
    max-height: 300px;
    overflow-y: auto;
}



.user_controls button.icon{
	/* z-index: 0; */
	font-size: 150%;
	/* color: white; */
	/* background-color: #666666; */
	margin-right: 0.4em;
}

.user_controls button.icon:hover, .user_controls button.icon[data-hint-expanded="true"]{
	z-index:10;
	background-color: transparent;
}

.user_controls button.icon::before{
    background-color: var(--color-headline);
    background-color: transparent;
    border-radius: inherit;
    z-index: 2;
    color: white;
    transition: all 0.5s;
}

.user_controls button.icon:hover:before, .user_controls button.icon[data-hint-expanded="true"]:before{
    color: var(--color-headline);
    background-color:  white;
    /* left:  0px; */
}

.user_controls button.icon[data-hint]:after{
    /* background-color: var(--color-headline); */
    z-index: 1;
    font-size: 75%;
    border-radius: 2em;
    top: -0.15em;
    left: -0.25em;
    line-height: 2.75em;
    background-color: #067780;
    background-color:  var(--color-headline);
    /* background: linear-gradient(133deg, rgba(51,183,194,1) 50%, rgba(0,165,179,1) 50%); */
    background: linear-gradient(133deg, rgba(255,255,255, 0.2) 50%, rgba(255,255,255,0) 50%);
    background: linear-gradient(133deg, rgba(255,255,255, 0.2) 50%, rgba(255,255,255,0) 50%);
    background-color: var(--color-headline);
    /* font-weight: bold; */
    /* padding: 0; */
    min-width: 2.75em;
    /* padding-left: 3em !important; */
    margin-left: 0px;
}

.user_controls button.icon[data-hint]:hover:after, .user_controls button.icon[data-hint][data-hint-expanded="true"]:after {
    /* background-color: var(--color-headline); */
    max-width:  20em;
    padding-right: 1em;
    padding-left: 3em;
    color: white;
}


.user_controls button.icon[data-hint-direction="left"]:after, .user_controls[data-hint-direction="left"] button.icon:after{
    right: -0.25em;
    left: auto;
    /* padding-right: 3em !important; */
    /* padding-left: 1em !important; */
}



.user_controls button.icon[data-hint-direction="left"]:hover:after, .user_controls[data-hint-direction="left"] button.icon:hover:after, .user_controls button.icon[data-hint-direction="left"][data-hint-expanded="true"]:after {
    padding-right: 3em;
    padding-left: 1em;
}

.user_controls {
    /* padding: 0em 0.25em; */
    margin: 1em 0.25em;

}


.user_controls button.icon[data-hint-expanded="true"]:after {  
pointer-events: all;
}

.user_controls button.icon:hover:after {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
}

html[data-dimension="sm"] .mainNav  .user_controls button.icon[data-hint] {
    font-size: 100%;
    margin-top: -5px;
}


html[data-dimension="md"] .mainNav  .user_controls button.icon[data-hint] {
    font-size: 94%;
    /* margin-top: 1px; */
}




.mainNav  .user_controls button.icon[data-hint] {
    font-size: 100%;
    /* font-size: 130%; */
    margin-top:0.05em;
    margin-top: 1em;
}

body:not(.notAtTop) .mainNav  .user_controls button.icon[data-hint] {
    --color-headline:  #657e8c;
}
body:not(.notAtTop) .mainNav  .user_controls button.icon[data-hint]:after {
    /* background: none; */
    background-color: rgba(0,0,0, 0.1);
    /* background: linear-gradient(133deg,rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1)50%); */
}



.form *:not(.selectable)>[data-structure="field"]{
	margin-top:1em;
	margin-bottom: 1em;
}
.form [data-view='pictures'][data-field='image'] {
    margin: 0 !important; /*b&m form */
}


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

.form [data-structure="field"]{

word-break: normal;
}


.editable[data-required="true"]:before {
	content: "\f304";
	font-family: "FontAwesome";
	color: inherit;
	position: absolute;
	right: 0.5em;
}

[data-valid="false"] {
    outline: 1px solid #ff0000 !important;
    border-radius: 0px;
}
[data-valid="false"]:before {
    content: "\f141";
	font-family: "FontAwesome";
	color: #ff0000;
	position: absolute;
	right: 0.5em;
}

[data-valid="true"]:before {
	content: "\f058";
	font-family: "FontAwesome";
	color: var(--color-headline);
	position: absolute;
	right: 0.5em;
}



.mainNav:after {
	content: "  ";
	display:block;
	position: absolute;
	height: 30rem;
	width: 100%;
	left:  0px;
	/*	background-color:green;
	background-color:rgba(0,0,0, 0.1);

    border-top: 1px solid rgba(0,0,0, 0.2);

    */
	margin-top: -1px;
	background: linear-gradient(180deg, #0000003b, transparent);
	background: linear-gradient(180deg, #0000003b, transparent);
	/* background: linear-gradient(180deg, rgb(0 95 103 / 60%), transparent); */
	z-index: -3;
	opacity: 0;
	transition: opacity 1s;
	pointer-events: none;
}


.mainNav:hover:after{
	opacity: 1;
}

.mainNav .user_controls + * {
	transition: opacity 0.5s;
}
.mainNav .user_controls:hover + * {
	opacity: 0.1;
}


.productEditor {
    padding-top:10rem;
}

.productEditor [data-type="picture"], .auctionEditor [data-type="picture"] {
	max-width: 100%;
	width: 400px;
}



.search_simple{
    text-align: center;
    border-radius: 4px;
    max-width:  100%;
    width: 670px;
    margin: auto;
    padding: 1em 1em;
    padding-top: 0.5em;
    box-shadow: 0rem 0rem 19rem 3rem white;
    /* color:  white; */
    display:  none;
}

.search_simple_fields {
	text-align: center;    
}

.search_simple_fields>div{
	color: var(--color-main);
	display: inline-block;
	background-color: white;
	padding: 0.8em 1.2em;
	border-radius: 5em;
	margin: 0.5em;
}
body.width-md .search_simple_fields>div{
	font-size: 120%;	
}

.search_simple_fields>.search_submit{
    background-color: var(--color-highlight);
    color: white;
    cursor: pointer;
}



.map {
	width: 100%;
	max-width: 100%;
	margin: 0px;
	border: 1px solid var(--color-headline);
	min-height: 400px;
	border-radius: 1em;
}





/* BUCHUNGEN */

.orderlist_item{
	background-color: white;
	padding:1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.orderlist_item>*{
	display: inline-block;
}


.orderlist_item [data-field="auction_final"]{
	width: 7em;
}

.orderlist_item [data-field="title"]{
	color: var(--color-headline);
	font-weight: bold;
	display: block;
}

.orderlist_item .showOnHover{
	display: block;
	font-size: 90%;
}

.orderlist_item .info-timespan{
    width: 14em;
}




/* INVOICES */
[data-template="orders-set"]{
    display: flex;
}
[data-template="orders-set"]>*{
	/* flex-shrink: 0; */
}

[data-template="orders-set"] .user_controls{
    width: 8em;
}
[data-template="orders-set"] [data-field="date_created"]{
    width: 8em;
}
[data-template="orders-set"] [data-field="invoice_id"]{
    width: 8em;
}
[data-template="orders-set"] [data-field="total"]{
    width: 5em;
}
[data-template="orders-set"] [data-field="date_paid"]{
    width: 8em;
}


/* CREDITS */
[data-template="credits-set"]{
    display: flex;
}
[data-template="credits-set"]>*{
	/* flex-shrink: 0; */
}

[data-template="credits-set"] .user_controls{
    width: 8em;
}
[data-template="credits-set"] [data-field="date_created"]{
    width: 8em;
}
[data-template="credits-set"] [data-field="invoice_id"]{
    width: 8em;
}
[data-template="credits-set"] [data-field="total"]{
    width: 5em;
}
[data-template="credits-set"] [data-field="date_paid"]{
    width: 8em;
}


/* PARTNER USERS */
[data-template="partner-users-set"]{
    display: flex;
}

[data-template="partner-users-set"] .user_controls{
    width: 19em;
    font-size: 80%;
}
[data-template="partner-users-set"] [data-field="company"]{
    width: 10em;
}
[data-template="partner-users-set"] [data-field="firstname"]{
    width: 8em;
}
[data-template="partner-users-set"] [data-field="lastname"]{
    width: 11em;
}





.separator {
    
    text-align: center;
    
    position: relative;
    /*z-index: 0*/
    border-color: var(--color-headline);    
    
    margin-left: auto; 
    margin-right: auto; 
               
}
.separator img {
    width: 4em;
    height: auto;
    text-align: center;
    /*z-index:1;*/
    margin-top: -0.5em;
}

.separator:before {
    left: 0%;
    margin-right: 2.8em;
    right: 50%;
    content: " ";
    display: block;
    border-bottom: 1px dotted;
    position: absolute;
    top: 1em;
    margin-top: 0.4em;
    /*z-index: -1;*/
}

.separator:after {/*    position:*/left: 50%;margin-left: 2.5em;right: 0;content: " ";display: block;border-bottom: 1px dotted;position: absolute;top: 1em;margin-top: 0.4em;/*z-index: -1;*/}

[data-placeholder][data-type="picture"] {
    outline: 1px solid var(--color-light);
}



.observation_selector>button:nth-child(2){
	display: none;
}



.border-top {
    border-top: 4px solid white;
	
}

.border-bottom {
    border-bottom: 4px solid white;
	
}





[data-template="product_presentation"] .product_title{
    font-size: 150%;
    margin-top:0.5em !important;
    margin-bottom: 0.5em;
}



.categoryPanel{
	transition: transform 0.2s;
	position: relative;
	border: 1px solid white;
	box-shadow: 5px 5px 2em #000000ba;
	cursor:  pointer;
}

.categoryPanel:hover{
    transform: scale(1.03);
}

/*
.categoryPanel:hover{
	transform:scale(1.05)
}
*/

.categoryPanel [data-module="Picture"]{
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.categoryPanel [data-module="Html"]{
    position: absolute;
/*    background-color: rgb(0 165 179 / 70%); */
    background: linear-gradient(157deg, rgba(0,165,179,1) 0%, rgba(0,165,179,0.2) 100%);
    left: 0px;
    bottom: 0px;
    padding: 2em;
    color: white;
}

.categoryPanel [data-module="Html"] p{
	max-height: 10em;
	transition: max-height 1s, color 0.5s;
	border-top: 1px dotted black;
}

.categoryPanel:not(:hover) [data-module="Html"] p{
	max-height: 0px;
	border-color: transparent;
	color: transparent;
}


.categoryPanel [data-module="Html"] h3{
	margin-bottom: -0.8em;
}



.circled {
    color: white;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    /*padding: 1em;*/
    width: 2em;
    /* height: 2em; */
    text-align: center;
    /* line-height: 2em; */
    /*vertical-align: text-bottom;*/
    margin-right: 0.25em;
}



.circled:after {
    content: " ";
    background-color: var(--color-headline);
    position: absolute;
    left: 0px;
    border-radius: 100%;
    display: inline-block;
    /*padding: 1em;*/
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    /*vertical-align: text-bottom;*/
    margin-right: 1em;
    margin-top: -0.35em;
    z-index: -1;
}

.bigger {
    font-size: 130%;	
}

.columns-2>div{
	display: flex;
	margin-bottom:0.5em;
	margin-top: 0.5em;
	align-items: flex-start;
}

.columns-2>div>*{
	--col-width: 50%;
}

.columns-2>div>*{
	display: inline-block;
	padding: 0.5em;
	flex-grow: 1;
	flex-shrink: 0;
	width: 50%;
}

.columns-2>div>*:first-child {
	 width: var(--col-width);
	 padding-right: 3em;
	 flex-shrink: 0;
	 flex-grow: 0;
}

   


.clip_box{


}

.clip_box [data-module="Html"]{
	outline: 1px solid var(--color-light);
	border-radius: 1em;
	padding: 2em;
	padding-bottom: 3em;
	text-align: center;
}

.clip_box [data-module="Picture"]{	
    margin: auto;
    max-width: 280px;
}
.clip_box [data-module="Picture"]>picture>img {	
   object-fit: contain;
}



[data-toggle-class] {
	max-height: 0px;
    transition: max-height 1s, opacity 0.5s;
    opacity: 0;
	overflow: hidden;
}
[data-toggle-class].expanded {
	max-height: 2000px;
	opacity: 1;
}

[data-toggle-class] + a:after {
	content: "Mehr erfahren";
	float: right;
}


[data-toggle-class].expanded + a:after {
	content: "Ausblenden";
}


.login_container {
	background-color: white;
	padding: 2em;
	width: 600px;
	max-width: 80%;
	margin: auto;
	
}

form input:not([type]), form input[type="text"], form input[type="number"], form  input[type="password"], form select, form  textarea {
    background-color: #ffffff !important;
    outline: 1px solid var(--color-headline);
    padding: 0.8em;
    width: 15em;
    text-align: center;
    max-width: 100%;
}




[data-module="Picture"][data-module-status="unset"]::before {
    background-color: var(--color-headline);
}



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



/* REPAIR FONTAWESOME */
[data-icon=""]:before{
    content: "\f3ed";
}

[data-icon=""]:before{
    content: "\f3c5";
}

[data-icon=""]:before{
    content: "\f084";
}





.tag-panel {
    padding: 2em;
    background-color: var(--color-light);
    margin-bottom: 2em;
    margin-top: 2em;
}

.tag-group>*{
	break-inside: avoid;
	display: inline-block;
	width:  100%;
}
html.width-md .tag-group{
    column-count: 2;
}
html.width-lg .tag-group{
    column-count: 3;
}


/* use class .hideEmpty instead
.tag-container-customer [data-field]:not([data-value]){
	display: none;
}
.tag-container-customer [data-field][data-value="0"]{
	display: none;
}
.tag-container-customer [data-field][data-value=""]{
	display: none;
}
*/

[data-view="pictures"] .tabs-controller{
	display: none;
}


[data-view="pictures"][data-structure="entity"] {
	background-color: white;
}

[data-view="pictures"][data-structure="entity"]>[data-structure="field"]:not([data-type="picture"]) {
	display: none;
}






[data-template="partners_reservations-editor"]>div{
    background-color: white;
    padding: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
    border: 1px solid #c3c0c0;
    border-radius: 3px;
}


[data-template="partners_reservations-editor"]>div>div{
    margin-top: 1em;
    margin-bottom: 1em;
}

#partners_reservations_list [data-structure="entity"] {
    padding: 0.5em 2em;
}




/*  CHANGE */

.facilitiesChecklist {
    column-count: 2;
    font-size: 80%;
}



.facilitiesChecklistSection {
	display: inline-block;
}




.payment_methods .showIfPredecessorChecked{
    border: 1px solid var(--color-headline);
    padding: 1.5em 1.5em;
    margin-top: 0.5em; 
    margin-bottom: 0.5em;
}



.btnLink{
    position: relative;
    /* overflow: hidden; */
    z-index: 2;
    color: white;
    margin-left: 1.5em;
    margin-right: 1.5em;
    white-space: nowrap;
}
.btnLink::after{
    content: "";
    display: block;
    /* width: 100%; */
    /* top: 0.9em;
    bottom: 0.9em;
    left: 0.3em;
    right: 0.3em; */
    top: -0.5em;
    bottom: -0.5em;
    left: -1em;
    right: -1em;
    /* background-color: var(--color-headline); */
    background-color: var(--color-highlight);
    position: absolute;
    z-index: -1;
    border-radius: 3em;
    transition: all 0.3s;
}

.btnLink:hover{
    color: white;
    text-decoration: none;
}

.btnLink:hover:after{
    background-color: var(--color-headline);
}

.bg_headline .btnLink:hover:after{
    background-color: var(--color-hover);
}

.btnLinkHeader::after{
    content: "";
    display: block;
    top: 0.9em;
    bottom: 0.9em;
    left: 0.2em;
    right: 0.2em;
    position: absolute;
    z-index: -1;
    border-radius: 3em;
    background-color: var(--color-headline);
    transition: all 0.5s;
}

.btnLinkHeader:hover::after{
    background-color: var(--color-highlight);
}
.btnLinkHeader:hover{
	color: white !important;
}

body.notAtTop .btnLinkHeader{
    color: white;
}


.error_message {
    color: var(--color-highlight);
}



/* SLIDE SHOW  */



.slideShow .slide{
    position: absolute;
    top: 0px;        
    left: 0px;
    
    opacity: 0;
    z-index: -1;
   
    transition: opacity 0s 10s;
}

.expanded .slideShow .slide{
    position: relative;
}





.slideShow .slide:first-of-type {
    position: relative;
}


.slideShow [data-module="Picture"] {
        min-height: 500px;
}

.slideShow .currentSlide {
    z-index: 1;
    opacity: 1 !important;   
    transition: opacity 5s ease-in;

}





/* 
[data-page="yachten"]{
    display: none !important;
}

body.user_37a68da9ac364834838ac399f72b2f11 [data-page="yachten"]{
    display: block !important;
}
body.group_admin [data-page="yachten"]{
    display: block !important;
}

 */


 .symbol-foto, .symbol-foto + *  {
    display: none;
 }

 .symbol-foto[data-value="70"] + * {
    position: absolute;
    bottom: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 0.15em 0.5em;
    font-size: 0.6em;    
    right: 0;
    display: block;
 }