#breadcrumb {
    display:flex;
    margin-bottom:10px;
}


#breadcrumb div.separator {
    padding:0 10px 0 10px;
    opacity:0.4;
}

#breadcrumb div.element {
    opacity:0.6;
    cursor:pointer;
}

body.fancy #breadcrumb div.element:hover {
    opacity:1;
}


div.calendar_entry {
	clear:both;
    display:flex;
    align-items:center;
	/*
    box-shadow:var(--faint-outline);
    border-radius:var(--border-radius);
	*/
	border-bottom:1px solid rgba(0,0,0,0.4);
	margin-top:5px;
	margin-bottom:5px;
	min-height:40px;
	position:relative;
	overflow:hidden;
}


div.calendar_entry div.day {
	width:40px;
	text-align:center;
	flex-grow:0;
	flex-shrink:0;
	line-height:16px;
}
div.calendar_entry div.weather_icon {
	width:50px;
	text-align:center;
	flex-grow:0;
	flex-shrink:0;	
}
div.calendar_entry div.weather_temp {
	width:50px;
	text-align:center;
	flex-grow:0;
	flex-shrink:0;	
	font-size:18px;
}
div.calendar_entry div.weather_text {
	width:80px;
	text-align:left;
	flex-grow:0;
	flex-shrink:0;		
	line-height:16px;
	font-size:14px;
	padding-left:5px;
	font-size:12px;
	opacity:0.5;
	overflow:hidden;
	text-overflow: ellipsis;
	
}

div.calendar_entry div.lines {
	text-align:right;
	flex-grow:1;
	padding:5px 15px 5px 15px;
}
div.line_linked, div.line {
	padding:5px 10px 5px 10px;
	border-radius:10px;
	margin-top:-5px;
	margin-bottom:-5px;
	display:flex;
}
div.line_linked {
	cursor:pointer;
}
div.line_linked div.icon, div.line div.icon {
	white-space: nowrap;
	min-width:30px;
	text-align:center;
}
div.line_repeat_info {
	margin-top:-10px;
	font-size:12px;
	opacity:0.4;
	text-align:center;
}

div.line_linked div.caption, div.line div.caption {
	flex-grow:1;
	padding-right:10px;
}
div.line_linked div.times, div.line div.times {
	padding-right:10px;
}
body.fancy div.line_linked:hover {
	background-color: var(--selected-outline);
}
div.calendar_show_options {
	text-align:center;
	cursor:pointer;
	border-radius:10px;
	color:rgba(128,128,128,0.7);
}
body.fancy div.calendar_show_options:hover {
	background-color: var(--selected-outline);
	color:inherit;
}
div.calendar_options {
	display:none;
}

#shopping_cart {

	background-color: var(--dialog-background);
    backdrop-filter: var(--dialog-filter);
    box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
    
	overflow:hidden;
	pointer-events: auto;
	z-index:var(--dialog-z);
	position:relative;

   	margin:20px;
    width:280px;
    padding:0 20px 20px 20px;

	transition:var(--transition);
}
#shopping_cart_container {
	overflow:hidden;
	flex-shrink:0;
}
@keyframes add_animation0 {
    0% { transform: scale(1) }
    30% { transform: scale(1.05); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
   
  }
  @keyframes add_animation1 {
    0% { transform: scale(1) }
    30% { transform: scale(1.05); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
   
  }

.cart_entry, .cart_entry_selectable {
    display:flex;
    margin-bottom:10px;
    user-select: none;
}
.cart_entry_selectable {
	cursor:pointer;
	margin:-5px;
	padding:5px;
	border-radius:var(--border-radius);
}
body.fancy .cart_entry_selectable:hover {
	background-color: var(--selected-background);
}
.cart_entry_selectable div.caption {
	flex-grow:1;
}
.cart_entry_selectable div.icon {
	width:30px;
	text-align:left;
	font-size:20px;
	flex-grow:0;
	flex-shrink:0;
}
.header {
    font-family: "Trajan";
    text-align:center;
    flex-grow:1;
    margin:30px 0 15px 0;
}

.cart_entry .action {
    width:22px;
    height:22px;
    line-height:22px;
    border-radius:3px;
    text-align:center;
    cursor:pointer;
    flex-shrink:0;
    flex-grow:0;
	transition:var(--transition);
    background-color: var(--selected-background);
}
body.fancy .cart_entry .action:hover {	
    background-color: var(--selected-outline);
    transform:scale(1.2);
}
.count {
    text-align:center;
    min-width:20px;
    padding:0 5px 0 5px;
    flex-shrink:0;
    flex-grow:0;
}

.item {
    flex-grow:1;
    flex-shrink:1;
    cursor:pointer;
    padding-left:10px;

}
.price {
    float:right;
	margin-left:10px;
}

.footer {
    font-weight:bold;
}


#main_content, #newsfeed_container, #loading {
    padding:40px;
	
    
    background-color: var(--dialog-background);
    backdrop-filter: var(--dialog-filter);
    box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
    
	overflow:hidden;
	pointer-events: auto;
	z-index:var(--dialog-z);
	position:relative;

	transition:var(--transition);
}

#main_content {
	min-width:35vw;
}

#loading {
    padding-top:100px;
    padding-bottom:100px;
}


#content p {
    margin:10px 0 10px 0;
	max-width:650px;
}

div.h1_container {
	display:flex;
}
.h1_container_element {
	flex-grow:1;
	flex-shrink:0;
	flex-basis:30px;
	display:flex;
}
h1 {
    font-family: "Trajan";
    text-align: center;
	font-weight:bold;
	font-size:2em;
	margin:10px 0 20px 0;
	text-wrap:balance;
}
h3 {
    text-align: center;
	font-weight:normal;
	font-size:16px;
	margin:-20px auto 20px auto;
	text-wrap:balance;
	opacity:0.5;
	max-width:500px;
}
h3.error {
	opacity:1;
	color:#cc0000;
	font-size:18px;
	margin:0px 0 10px 0;
	text-align:center;
}
h3.encouragement {
	opacity:1;
	color:#008800;
	font-size:18px;
	margin:0px 0 10px 0;
	text-align:center;
}
h4 {
	clear:both;
    text-align: center;
	font-weight:normal;
	font-size:16px;
	margin:25px 0 10px 0;
	text-wrap:balance;
	opacity:0.5;
}
.back, .close {
	cursor:pointer;
	opacity:0.3;
	
	width:30px;
	display:inline;
	flex-grow:1;
}

.back {
	line-height:50px;
	font-size:1.7em;
	text-align:left;
}
body.fancy .back:hover, body.fancy .close:hover {
	opacity:1;
}

#content p.calendar_infos {
	opacity:0.7;
	font-size:13px;
	text-align:right;
}
#content div.gallery {
	display:flex;
	border-radius: 10px;
	flex-wrap: wrap-reverse;
	flex-direction: row-reverse;
	gap: 10px;
}
#content div.gallery_image {
	border-radius: 10px;
	height:25vh;
	flex-basis:25vh;
	flex-grow:1;
	flex-shrink:1;
	background-size: cover;
	background-position: 50% 25%;
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}
div.warning_zone {
	max-width:400px;
	background-color:rgba(255,0,0,0.1);
	padding:20px 30px 20px 30px;
	border-radius:10px;
}
div.encouragement_zone {
	max-width:400px;
	background-color:rgba(0,200,0,0.1);
	padding:20px 30px 20px 30px;
	border-radius:10px;
}
#content img.in_article {
    border-radius: 10px;
    max-width:30vw;
	max-height:30vh;
    margin:5px 20px 10px 0;
    float:left;
    
}
a.download {
	text-decoration:none;
	margin-top:10px;
	padding:7px 12px 5px 12px;
	cursor:pointer;
	text-align:center;
	border-radius:5px;
	background-color: var(--selected-background) !important;
	outline: 3px solid var(--selected-outline);
	outline-offset: -3px;       
	user-select: none;
	transition:var(--transition);
	display:flex;
	color: var(--button-text);
}
body.fancy a.download:hover {
	background-color: var(--selected-outline) !important;
	transform:scale(1.05);
}
span.download_icon {
	margin-right:8px;
	margin-top:2px;
}



#children {
    clear:both;
}

#children.twocolumn {
	column-width: 450px;
	columns:2;
	column-gap:20px;
}

#center_dialog div.element {
    display:flex;
    flex-direction: row;
    border-radius:10px;
    align-items:center;
    position:relative;
    margin:0px -10px 0 -10px;
	padding:10px;
}



#center_dialog div.element div.caption {
    padding:10px 0px 10px 0px;
    flex-grow:1;
    flex-shrink:1;
	max-width:350px;
}

#center_dialog div.element div.element_infos {
	opacity:0.7;
	font-size:13px;
	text-align:center;
	margin-top:5px;
	margin-left:10px;
}
#center_dialog div.element div.element_error {
	
	font-size:13px;
	text-align:center;
	margin-top:5px;
	margin-left:10px;
	color:#cc0000;
	font-weight:bold;

}

#center_dialog div.element div.calendar_infos {
	opacity:0.7;
	font-size:13px;
	text-align:right;
	margin-top:5px;
	margin-left:10px;
}
#center_dialog div.element div.caption:first-child {
    padding-left:10px;
}
#center_dialog div.element div.caption:last-child {
    padding-right:10px;
}
#center_dialog div.element div.info {
	padding:10px 10px 10px 10px;
    flex-grow:0;
    flex-shrink:0;
}

.sub_button {
    font-size:25px;
    width:40px;
    flex-grow:0;
    flex-shrink:0;
    cursor:pointer;
    text-align:center;
    padding-top:10px;
}

#center_dialog div.element div.image, #center_dialog div.element div.icon, #center_dialog div.element div.action {
    width:var(--teaser-x);
    height:var(--teaser-y);
    background-position:50% 20%;
    background-repeat:no-repeat;
    background-size:cover;
    border-radius:10px;
    margin-right:20px;
    text-align:center;
    line-height:var(--teaser-line-height);
    font-size:var(--teaser-font-size);
    background-color:var(--dialog-background);
    flex-shrink:0;
}

#center_dialog div.element div.icon_small, div.image_small, #center_dialog div.element div.icon_small_spacer {
	width:50px;
	height:40px;
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-size:cover;
    border-radius:5px;
    margin-right:10px;
    text-align:center;
    line-height:43px;
    font-size:22px;
   
    flex-shrink:0;
}
#center_dialog div.element div.icon_small {
	background-color:var(--dialog-background);
}

#center_dialog div.element div.action {
    cursor:pointer;
    margin-right:0;
	margin-left:10px;
	transition:var(--transition);
	background-color: var(--dialog-background);
	outline: 6px solid var(--selected-outline);
}

body.fancy #center_dialog div.element div.action:hover {
	background-color: var(--selected-background) !important;
	transform:scale(1.05);
	
}

#center_dialog div.busy {
	opacity:0.2;
}


dialog#main_dialog {
	background-color: var(--dialog-background);
    backdrop-filter: var(--dialog-filter);
    box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
	padding:40px;
	border:none;
}
dialog#main_dialog:focus {
	outline:none;
}
dialog#main_dialog::backdrop {
	backdrop-filter: blur(10px);
}

@font-face { font-family: "Trajan"; src: url("/fonts/Trajan/TrajanPro3-Regular.otf"); font-display: swap;}
@font-face { font-family: "Plovdiv"; src: url("/fonts/Plovdiv/PlovdivSans.otf"); font-display: swap;}
@font-face { font-family: "Edwin"; src: url("/fonts/Edwin/Edwin-Roman.otf"); font-display: swap;}
@font-face { 
    font-family: "Poppins"; 
    src: url("/fonts/Poppins/Poppins-Regular.ttf"); 
    font-display: swap;
}

@font-face { 
    font-family: "Poppins"; 
    src: url("/fonts/Plovdiv/PlovdivSans.otf"); 
    font-display: swap;
    unicode-range: U+04??; 
}



    div.big_button, div.cart_submit_button, div.big_button_disabled {
        margin-top:20px;
        padding:20px;
        
        text-align:center;
        border-radius:10px; 
        background-color: var(--selected-background) !important;
          
        user-select: none;
		transition:var(--transition);
		display:flex;
    }
	div.big_button, div.cart_submit_button {
		/*
		outline: 6px solid var(--selected-outline);
        outline-offset: -6px;    
		*/ 
		cursor:pointer;
		position:relative;
		
	}
	div.big_button_disabled {
		opacity:0.5;
	}
	div.big_button, div.big_button_disabled {
		display:flex;
		min-width:250px;
	}
    div.cart_submit_button {
        padding:10px;
    }

	div.expander {
		width:30px;
		height:30px;
		font-size:22px;
		opacity:0.2;
		transition:var(--transition);
	}

	div.expanded_button {
		display:none;
		padding:10px;
		padding-left:40px;
		gap:10px;
		cursor:pointer;
		border-radius:8px;
		transition:var(--transition);	
		background-color:var(--dialog-background);
		margin-bottom:5px;

	}	
	div.expanded_button div.status_good, div.expanded_button div.status_warn {
		background-color: rgba(0,0,0,0.1);
		color:var(--button-text);
		padding-top:3px;
	}
	div.expanded_button:nth-child(2) {
		margin-top:20px;
	}
	div.big_button.expanded, div.big_button.always_expanded {
		cursor:default;
	}
	div.big_button.expanded div.expanded_button, div.big_button.always_expanded div.expanded_button {
		display:flex;
	}
	div.big_button.expanded div.expander {
		opacity:0;
	}
	div#delaytimer { 
		
	}
	div#delaynumber {
		font-family:monospace;
		margin-left:auto;
		margin-right:auto;
		margin-top:30px;
		margin-bottom:10px;
		font-size:80px;
		width:160px;
		height:160px;
		line-height:155px;
		font-weight:bold;
		overflow:hidden;
		white-space:nowrap;
		border-radius:100px;
		background-color:#fff;
		color:#fc0;
		text-align:center;
		transition:var(--transition);
		text-shadow:0 0 6px rgba(0,0,0,1);
	}

	


	/*
	div.compact {
		padding:0 10px 0 10px !important;
	}
	*/

	@media (hover: hover) {
		body.fancy div.big_button.selectable:not(.expanded):hover, 
		body.fancy div.cart_submit_button:hover,
		body.fancy div.expanded_button:hover {
			background-color: var(--selected-outline) !important;
			transform:scale(1.05);
		}
		body.fancy div.big_button.expandable:not(.expanded):hover div.expander {
			opacity:0.4;
		}
	
	}

	.bbb_loading, .bbb_busy, .bbb_ok, .bbb_fault {
		display:none;
	}

	.background_loading .bbb_loading, .background_busy .bbb_busy, .background_ok .bbb_ok , .background_fault .bbb_fault  {
		display:block;
		position:absolute;
		text-align:center;
		left:0;
		right:0;
		bottom:8px;
		opacity:0.5;
		font-size:0.7rem;
	}

	.background_loading, .background_busy, .background_ok {
		background: linear-gradient(90deg, rgba(0,150,0) 0%, rgba(50,200,50) 45%, rgba(255,255,255,1) 50%, rgba(0,150,0) 55%, rgba(50,200,50) 60%, rgba(255,255,255,1) 95%);
		background-size: 200% 100%;
		animation: gradient 1s linear infinite;
		color:#fff;
	}
	
	.background_fault {
		background: linear-gradient(90deg, rgba(200,0,0) 0%, rgba(150,0,0) 100%);
		background-size: 100% 100%;
		color:#fff;
	}


	
    div.big_button div.text {
        flex-grow:0;
        text-align:center;
    }
    div.big_button div.price {
        flex-grow:0;
        flex-shrink:1;
        margin-left:10px;

    }
    div.big_button div.icon, div.big_button_disabled div.icon {
        width:50px !important;
        flex-grow:0 !important;
        flex-shrink:0 !important;
        font-size:25px !important;
        text-align:center !important;
        margin:-15px 0 -20px 0 !important;
        padding-top:13px !important;
		background:transparent !important;
		line-height:25px !important;
		height:auto !important;
    }


    label {
        cursor:pointer;
    }

    .line_item, .block_item {
		margin-top:2px !important;
        border-radius:8px !important;
		padding:4px 10px 4px 10px !important;
    }
	.block_item {
		text-align:center;
	}

    .required {
		border-left:5px solid #00c;
        background-color:rgba(0,0,200,0.3);
    }
    .missing {
        border-left:5px solid #c00;
        background-color:rgba(200,0,0,0.3);
        margin-left:-15px;
    }


    .general_input {
        width:160px;
        margin-right:15px;
		flex-shrink:0;
		text-align: center;
    }
	.general_input_half {
        width:72.5px;
        margin-right:15px;
		padding-top:10px;
		padding-bottom:10px;
		white-space: nowrap;
		flex-shrink:0;
    }
    .form_input, .form_textarea {
        background-color: #fff;
        border:none;
        padding:10px;
        border-radius:10px;
        box-sizing: border-box;
    }
    .form_input:focus, .form_textarea:focus {
        outline: 4px solid #fc0;
        outline-offset: 0px;
    }


    
    .form_input {
        width:160px;
    }
    .form_textarea {
        margin-top:5px;
        width:300px;
        height:100px;
        resize: none;
    }
	svg.signature {
		margin-top:5px;
		border-radius:10px;
	}
	svg.signature_reset {
		cursor:pointer;
		color:#aaa;
	}
	svg.signature_reset:hover {
		color:#a00;
	}
	svg.stars {
		cursor:pointer;
	}


	@keyframes wobble {
		0%, 100% {
		  transform: translateX(0);
		}
		25% {
		  transform: translateX(-8px);
		}
		75% {
		  transform: translateX(8px);
		}
	  }
	  
	  .wobble-effect {
		border-color: #ff0000;
		animation: wobble 0.2s ease-in-out 3;
	  }

#inapp_warning {
	align-items: center;

    z-index: var(--dialog-z);
    background-color: var(--dialog-background);
    backdrop-filter: var(--dialog-filter);
	box-shadow: var(--box-shadow);

	pointer-events: auto;
	text-align:center;
	padding:10px;
	border:3px solid #ff0000;
	margin-top:10px;
	display:none;

}

#main_header {
  
	min-height:80px;
    display:flex;

    align-items: center;

    z-index: var(--dialog-z);
    background-color: var(--dialog-background);
    backdrop-filter: var(--dialog-filter);
	box-shadow: var(--box-shadow);

    font-family: "Trajan";
	pointer-events: auto;
	transition:var(--transition);
}

#main_header div.element {

    text-align:center;
    padding:5px 0 0 0;
    flex-basis:100px;
	flex-shrink:1;
    flex-grow:0;
    box-sizing: border-box;
	height:80px;

	display:flex;
	flex-direction: column;
	justify-content: center;
	transition:var(--transition);
	

	position:relative;
}
#main_header div.selected, body.fancy #main_header div.selectable:hover {
    color:var(--button-text-selected);
	/*
    outline: 6px solid var(--selected-outline);
    outline-offset: -10px;
	*/
}


#main_header div.padded {
	padding:10px 5px 5px 5px;
}
#main_header div.big_icon {
    font-size:25px;
	text-align:center;
}
#main_header div.huge_icon {
    font-size:50px;
	padding-top:15px;
	text-align:center;
}
div.bigtime {
    font-size:22px;
}
div.timezone {
    font-size:12px;
}


div#grid1.home {
	min-height:100%;
}
div#grid1.home div#grid2 {
	flex-grow:1;
}

div#grid1.home div.grid2_spacer {
	display:none;
}
div#grid1.home div#center_dialog {
	display:none;
}
div#grid1.home div#main_navigation {
	flex-direction:row;	
	justify-content: center;
	align-items: flex-end;
	max-width:100%;
	margin:0;
	column-gap:30px;
	padding:0 20px 20px 20px;
	box-sizing: border-box;
}

div#grid1.home div#main_navigation div.element {
	font-size:18px;
	border-radius:15px;
	padding:55px 0 0 0;	
	flex-shrink:1;
	flex-grow:0;
	margin:0;
	width:180px;
	height:160px;
	box-sizing: border-box;
	min-width:0;
	overflow:hidden;

}

@media not all and (min-width: 1200px) {
	div#grid1.home div#main_navigation {
		column-gap:20px;
	}
	div#grid1.home div#main_navigation div.element {
		font-size:15px;
		border-radius:10px;
		padding:30px 0 0 0;	
		width:140px;
		height:120px;
	}
}

@media not all and (min-width: 800px), (orientation:portrait) {

	div#grid1.home div#main_navigation {
		flex-direction:column;	
		text-align:center;
		width:100%;
		flex-grow:1;
		align-items: center;
		justify-content: center;

	}
	div#grid1.home div#main_navigation div.element {
		display:flex;
		padding:0;
		min-width:250px;
		height:80px;
		flex-basis:80px;
		margin-top:10px;	
		align-items: center;
		
		
	}
	div#grid1.home #main_navigation div.element div.icon {
		font-size:26px !important;
		width:60px;
		text-align:center;
		padding-top:8px;
		margin-left:5px;
	}
	div#grid1.home #main_navigation div.element div.caption {
		font-size:20px  !important;
		text-align:left;
		flex-grow:1;
		font-family: "Trajan";
		padding-top:6px;
	}

	div#grid1.home .long_caption {
		transform:none;
	}
}

div#chat_launcher {
    width:50px;
    height:50px;
    position:fixed;
    bottom:20px;
    right:-200px; /* Offscreen, will be shown once hyperchat is initialized */
    text-align:center;
    line-height:50px;
    z-index:1100;
    border-radius:20px;

    overflow:hidden;
    cursor:pointer;

    background-color: var(--dialog-background);
    backdrop-filter: var(--dialog-filter);
    box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);

}

/*
@media not all and (min-width: 800px) {
    div#chat_launcher {
        bottom:20px;
        right:20px;
    }
}
*/

div#chat_room {
    width:300px;
    height:450px;
    bottom:20px;
    right:20px;

	position:fixed;
    z-index:1500;

    display:flex;
    flex-direction: column;
    overflow:hidden;

    background-color: var(--dialog-background);
    backdrop-filter: var(--dialog-filter);
    box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
}
div#chat_title_bar {
    height:40px;
    line-height:40px;
    display:flex;
}
div#chat_title_bar div.title {
    padding-left:8px;
}
div#chat_title_bar div#chat_online {
    flex-grow:1;
    text-align:center;
}
div#chat_title_bar div#closebutton {
    width:40px;
    text-align:center;
    cursor:pointer;
}




div#chat_content {
    flex-grow:1;
    overflow:auto;
}
div#online_explainer, div#offline_explainer {
    margin:8px;
    text-align:center;
    font-size:13px;
    color:rgba(0,0,0,0.5);
}
div#chat_content div.i {
    margin:8px;
    text-align:center;
    color:rgba(0,0,0,0.3);
    font-size:12px;
}
div#chat_content div.m {
    padding:5px;
    background-color: #ccddee;
    color:#000;
    margin:8px 8px 8px 40px;
    border-radius:8px;
}
div#chat_content div.t {
    padding:5px;
    background-color: #e0e0e0;
    color:#000;
    margin:8px 30px 8px 8px;
    border-radius:8px;
}
div#chat_submitbar {
    height:60px;
    display:flex;
    background-color:#eee;
}
#chat_input_text {
    resize: none; 
    width:240px;
    margin:8px 0 8px 8px;
    color:#000;
    background-color:#fff;
    border-radius:7px;
    padding:2px 0 0 4px;
    border:none;
    font-family: "Plovdiv";
    font-size:17px;
}
#chat_input_text:focus {
    outline:1px solid rgba(0,0,0,0.2);
}
#chat_send_text {
    flex-grow:1;
    text-align:center;
    cursor:pointer;
    line-height:60px;
    color:rgba(0,0,0,0.4);
}

/* Item Rollover (not on phones) */
@media (hover: hover) and (pointer: fine) {
    body.fancy div#chat_title_bar div#closebutton:hover, body.fancy div#chat_launcher:hover {
        color:#fff;
        background-color:#336699;
    }
    body.fancy #chat_send_text:hover {
        color:#000;
    }
}
img.inchat {
    height:80px;
}




:root {
    --leaflet-tile-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.8) brightness(0.7);
}
body.night .leaflet-tile {
    filter: var(--leaflet-tile-filter, none);
}

body.night .leaflet-container {
    background: #303030;
}

div#main_map {
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
	pointer-events: auto;
	z-index:10;
}


#main_navigation {
	
    margin:20px 20px 0 20px;
    min-width:120px;

    display:flex;
	flex-shrink:0;
	flex-grow:0;
    flex-direction: column;   
    
    z-index: var(--dialog-z);
    font-family: "Trajan";
	pointer-events: auto;
	
	transition:var(--transition);
}
.long_caption {
	transform:scale(0.85,0.93);
}
#main_navigation div.element {
    padding:20px 0 20px 0;
    text-align:center;
    border-radius:10px;
    margin-bottom:10px;
    
    background-color: var(--dialog-background);
    backdrop-filter: var(--dialog-filter);
	box-shadow: var(--box-shadow);
    color:var(--button-text);
    position:relative;

	transition:var(--transition);
}

#main_navigation div.element div.icon {
    font-size:30px;
    
}

#main_navigation div.selected, body.fancy #main_navigation div.selectable:hover {
    color:var(--button-text-selected);
	/*
    outline: 6px solid var(--selected-outline);
    outline-offset: -6px;
	*/
}




#newsfeed_content div.entry {
    display:flex;
    align-items:center;
    box-shadow:var(--faint-outline);
    border-radius:var(--border-radius);
	margin-bottom:15px;
	min-height:40px;
}
#newsfeed_content div.recent div.entry {
	background-color: var(--dialog-background);
	outline:5px solid #fc0;
	margin-bottom:30px;
}


#newsfeed_content div.linked {
	cursor:pointer;
}
body.fancy #newsfeed_content div.linked:hover {
	background-color: var(--selected-outline) !important;
}
#newsfeed_content div.entry  div.icon {
    width:60px;
    text-align:center;
    font-size:28px;
    flex-grow:0;
    align-self: start;
    padding:12px 0 12px 0;
}
#newsfeed_content div.entry  div.caption {
	padding:10px 5px 10px 0;
}
#newsfeed_content div.entry  div.caption:first-child {
	padding-left:15px;
}
#newsfeed_content div.entry div.spacer {
	flex-grow:1;
}
#newsfeed_content div.entry div.i {
    text-align: right;
    opacity:0.5;
    font-size:11px;
	padding:8px 10px 8px 10px;
	align-self: start;
}
#newsfeed_content div.entry  div.caption h1 {
	font-family:"Trajan";
	font-weight:bold;
	margin:2px 0 4px 0;
	font-size:17px;
	text-align:left;
}
#newsfeed_content div.recent div.entry  div.caption h1 {
	margin:10px 0 10px 0;
	font-size:22px;
}



div.select_dialog_container {
    position:fixed;
    top:10px;
    bottom:10px;
    display:flex;
    flex-direction: column;
    min-width:300px;
    box-sizing: border-box;
    z-index:101;
    transition: all 1s;
}
div.select_dialog_container div.top_spacer {
    flex-shrink:10;
    flex-grow:0;
}
div.select_dialog_container div.bottom_spacer {
    flex-shrink:0;
    flex-grow:1;
}

div.select_dialog {
    transition: all 1s;
    
	background-color: var(--dialog-background);
    backdrop-filter: var(--dialog-filter);
    box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);

    border-radius:3px;
    flex-shrink:1;
    overflow:hidden;
    display:flex;
    flex-direction: column;
}
div.select_option, div.select_option_selected {
    cursor:pointer;
    padding:1px;
}
div.select_option:hover {
    background-color: var(--bg-rollover);
}
div.select_option_selected {
    background-color: var(--bg-selected);
}
div.select_dialog div.select_option, div.select_dialog div.select_option_selected {   
    padding:1px 10px 1px 10px;
}
@media (pointer: coarse) {
    div.select_dialog div.select_option, div.select_dialog div.select_option_selected {   
        padding:10px 10px 10px 10px;
    }
}


input.select_search {
    display:block;
    width:100%;
    box-sizing:border-box;
    background-color: var(--bg-input);
    color: var(--fg-input);
    padding:8px;
    outline-offset: -4px;
}

#main_selector_options {
    display:flex;
    flex-shrink:1;
    overflow:auto;
    flex-direction: column;
}

#main_selector_options.cubic {
    flex-direction: row;
    flex-wrap:wrap;
    max-width:330px;
}

#main_selector_options.cubic div.select_option, #main_selector_options.cubic div.select_option_selected{

        
        font-size:19px;
        line-height:40px;
        width:40px;
        height:40px;
        text-align:center;
        box-sizing: border-box;
    
}

div.vl_entry {
    display:flex;
}
div.vl_entry div.i {
    padding:2px 4px 0 0;
    flex-grow:0;
    flex-shrink:0;
}

div.select_option div.vl_entry, div.select_option_selected div.vl_entry {
    height:30px;
    line-height:30px;
}
div.select_option div.vl_entry div:first-child, div.select_option_selected div.vl_entry div:first-child {
    margin-right:8px;
}
div.select_option div.vl_entry svg:first-child, div.select_option_selected div.vl_entry svg:first-child {
    margin-right:8px;
}

body {
    padding:0;
    margin:0;
    border:0;
    font-family: "Poppins";
    font-size:16px;
  
    --dialog-z:1000;
	--border-radius:10px;
	--box-shadow:none;
	
	--teaser-x:120px;
	--teaser-y:90px;
	--teaser-font-size:35px;
	--teaser-line-height:100px;
	
}
body.fancy {
	--transition:all 0.1s;
	transition:var(--transition);
	transition:font-size 0s;
	--dialog-filter:blur(10px);
}
body.kiosk {
    touch-action:none;
    /* cursor:none !important; */
	user-select: none; 
}
a {
	text-decoration:none;
	cursor:pointer;
}
body.day a {
	color:#d80;
}
body.day a:hover {
	color:#fc0;
}
body.night a {
	color:#fc0;
}
body.night a:hover {
	color:#fea;
}


body.day {
    background-color: #fff;
    color:#000;
	
	--filled-background:#ccc;
    --dialog-background:rgba(255,255,255,0.8);
	--box-shadow:0 0 20px rgba(0,0,0,0.4);
    --selected-background:rgba(128,128,128,0.3);
    --selected-outline:rgba(255,255,255,0.7);   
    --button-text: #333;
    --button-text-selected: #fff;
	--faint-outline:0 0 10px rgba(0,0,0,0.4);
}
body.night {
    background-color: #000;
    color:#fff;
	--filled-background:#666;
    --dialog-background:rgba(0,0,0,0.6);
	--box-shadow:0 0 20px rgba(0,0,0,0.4);
    --selected-background:rgba(255,255,255,0.2);
    --selected-outline:rgba(255,255,255,0.3);
    --button-text: #ddd;
    --button-text-selected: #fff;
	--faint-outline:0 0 10px rgba(255,255,255,0.2);
}




div#grid1 {
	pointer-events: none;
	min-width:420px;
	position:absolute;
	left:0;
	right:0;
	top:0;
	display:flex;
	flex-direction: column;

	transition:var(--transition);
}

div#grid2 {
	display:flex;
	flex-direction: row;

	transition:var(--transition);
}

div.grid2_spacer {
	flex-grow:1;
	
	transition:var(--transition);
}


#center_dialog {
	flex-shrink:1;
	flex-grow:0;
	min-width:360px;
	padding-top:20px;

	transition:var(--transition);
}


/* 
#center_dialog {
    position:absolute;
    top:100px;
    width:auto;
    min-width:650px;
    left:max(160px, calc(20px + 50vw - 300px));
    right:max(20px, calc(20px + 50vw - 300px));  
    z-index: var(--dialog-z);
}

#center_dialog.compact {
    
    left:160px;
    width:auto;
    min-width:0;
    max-width:400px;
    right:auto;


}
#center_dialog.compact #main_content {
    padding:20px;
}
*/

div#main_background {
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-size:cover;
    background-position:50% 50%;
}

.spacer {
    flex-grow:1;
}

div.infos {
    opacity:0.8;
    font-size:14px;
}
span.timezone {
	opacity:0.5;
	font-size:11px;
}

div.selectable {
    cursor:pointer;
	user-select: none;
}
body.kiosk div.selectable {
    touch-action:none;
    /* cursor:none !important; */
}

div.selected, body.fancy div.selectable:hover {
    background-color: var(--selected-background) !important;
}

div#debugicon {
	position:absolute;
	width:20px;
	height:20px;
	border-radius:20px;
	left:-200px;
	top:-10px;
	z-index:2000;
	background-color:rgba(255,200,0,0.5);
	user-select: none;
}
.debug_highlight {
	outline:2px solid #f60;
}
div.reminder {
    position:absolute;
    top:14px;
    left:14px;
    background-color: #c00;
    color:#fff;
    line-height:16px;
    text-align:center;
    width:16px;
    height:16px;
    overflow:hidden;
    box-shadow:0 0 5px rgba(0,0,0,0.2);
    font-size:10px;
    border-radius:100%;
	font-family:Arial;
	font-weight:bold;
}
div#main_navigation div.reminder, div#main_header div.reminder {
	top:8px;
    left:8px;
}

div.recommendation {
    position:absolute;
    top:2px;
    left:2px;
    color:#fc0;    
    font-size:19px;
    filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.6));
}

.center_icon {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    top:0;
    bottom:0;
    left:0;
    right:0;
    flex-grow: 1;
    text-align: center;
    color:#888;
}



@keyframes rotation {
	0% { transform: rotate(0deg); }
	20% { transform: rotate(0deg); }
	30% { transform: rotate(10deg); }
	50% { transform: rotate(-10deg); }
	60% { transform: rotate(10deg); }
	70% { transform: rotate(-10deg); }
	80% { transform: rotate(10deg); }
	90% { transform: rotate(-10deg); }
	100% { transform: rotate(0deg); }
}

div#smarthome_map_container {
	position:fixed;
	left:0;
	top:80px;
	right:0;
	bottom:0;  

	overflow:hidden;
	z-index: 10;
	pointer-events: auto;

	transition:var(--transition);
	background-color:var(--filled-background);
}

div#smarthome_map {
	position:relative;
	--element-scale:50%;
	background-color:var(--filled-background);
}
div#smarthome_map_background {
	position:absolute;
	background-size:75%;
	background-position:50% 50%;
	background-repeat:no-repeat;
	transform-origin:0 0;
}
div.smarthome_warning_container {
   
    padding:20px;
    margin-bottom:20px;
    
    background-color: var(--dialog-background);
    backdrop-filter: var(--dialog-filter);
    box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);

	overflow:hidden;
	pointer-events: auto;
	z-index:var(--dialog-z);
	position:relative;

	transition:var(--transition);

}
div.smarthome_warning {
    display:flex;
    align-items: center;
}
div.smarthome_warning_icon {
    width:40px;
    text-align:center;
    font-size:30px;
    flex-grow:0;
    align-self: center;
    padding-top:5px;
	color:#ee0000;
	margin-right:10px;
}

div.smarthome_ob, div.smarthome_ob_smol, div.smarthome_ob_smol_wide, div.smarthome_ob_smol_label {
    position:absolute;
    width:40px;
    height:40px;
    box-shadow:var(--box-shadow);
    overflow:hidden;
    text-align:center;
    line-height:40px;
    font-size:30px;
    border-radius:3px;
    transform: translate(-50%, -50%) scale(var(--element-scale));
    user-select: none;
    display: flex;
	color:#333;
	background-color: #fff;
}
div.smarthome_ob_icon {
    position:absolute;
    width:40px;
    height:40px;
    font-size:30px;
    border-radius:3px;
}
div.circle_menu {
    position:absolute;
    display:none;
    z-index:100;
    cursor:default;
    box-shadow:0 0 5px #000;
}
div.smarthome_ob_item_icon {
	position:absolute;
	left:-10px;
	top:-8px;
	font-size:25px;
	line-height:45px;
	width:40px;
	height:40px;
	border-radius:30px;
	overflow:hidden;
	text-align:center;
	line-height:50px !important;
	box-shadow:var(--box-shadow);
	cursor: pointer;
    color:#333;
	background-color: #fff;
}
body.fancy div.smarthome_ob:hover, body.fancy div.smarthome_sub_ob:hover,  body.fancy div.smarthome_ob_smol_label:hover, body.fancy div.smarthome_ob_smol_label:hover div.smarthome_ob_item_icon, body.fancy div.smarthome_ob_smol_label_selected, body.fancy div.smarthome_ob_smol_label_selected div.smarthome_ob_item_icon {
    color:#fff;
	background-color: #48a;
    outline-offset: -2px;
	cursor:pointer;
}
div.smarthome_ob {
	line-height:50px;
}
div.smarthome_ob_smol, div.smarthome_ob_smol_wide, div.smarthome_ob_smol_label {
    height:20px;
	line-height:20px;
    white-space:nowrap;
}
div.smarthome_ob_smol_wide {
    width:65px;
    white-space:nowrap;
    text-align:right;
}
div.smarthome_ob_smol_label {
	width:auto;
	padding:0 5px 0 5px;
    min-width:40px;
    white-space:nowrap;
    text-align:center;
	display:block;
	font-size:inherit;
}
div.smarthome_sub_ob {
    position:absolute;
    width:25px;
    height:25px;
    box-shadow:0 0 5px #000;
    overflow:hidden;
    text-align:center;
    line-height:25px;
    font-size:17px;
    border-radius:3px;
    user-select: none;
    cursor: pointer;
    top:-15px;
    left:-15px;
    z-index:9;
}

div.smarthome_ob_details {
    position:absolute;
    width:autopx;
    box-shadow:0 0 5px #000;
    overflow:hidden;
   
    padding:3px 6px 2px 6px;
    border-radius:3px;
    transform: translate(25px, -50%);   
    user-select: none;
    cursor: pointer;
    z-index:10;

	color:#222;
	background-color: #eee;
}

svg.color_swatch {
    width:100%;
    height:100%;
    text-align:center;
    max-width:40px;
    max-height:30px;
    margin-left:auto;
    margin-right:auto;
    border-radius:3px;
    position:relative;
    box-shadow:0 0 4px rgba(0,0,0,0.3);
}
div.smarthome_ob svg.color_swatch {
    height:12px;
    position:absolute;
    left:0;
    right:0;
    top:-10px;
    border-radius:3px;
    box-shadow:0 0 5px #000;
}
.status_fault, .status_good, .status_stale, .status_warn, .status_on, .status_off, .status_hot, .status_cold, .status_sensor, .cam_ob, .cam_ob_fault {
    width:100%;
    height:100%;
    text-align:center;
    max-width:40px;
    margin-left:auto;
    margin-right:auto;
    border-radius:3px;
    position:relative;
}
.expanded_button .status_fault,
.expanded_button .status_good,
.expanded_button .status_stale,
.expanded_button .status_warn,
.expanded_button .status_on,
.expanded_button .status_off,
.expanded_button .status_hot,
.expanded_button .status_cold,
.expanded_button .status_sensor,
.expanded_button .cam_ob,
.expanded_button .cam_ob_fault {
    max-width: 25px;
}
div.smarthome_ob_smol_wide .status_sensor {
    max-width:none;
    text-align:right;
    padding-right:4px;
}
.status_sensor, .status_sensor_nocolor {
    font-size:15px;
    line-height:22px;
}
.status_sensor {
    background-color:#ccc;
    color:#444;
}
.sub_icon {
    position:absolute;
    right:4px;
    top:0;
    color:#fff;
    font-size:18px;
    filter:drop-shadow(0 0 4px #000) drop-shadow(0 0 2px #000);
}

.status_fault {    background-color:#c00;    color:#fff;  }
.status_stale {    background-color:#ccc;    color:rgba(0,0,0,0.2);  }
.status_good {    background-color:#339933;    color:#fff;  }
.status_warn  {    background-color:#b93;    color:#fff;  }

.status_off {    background-color:#aaa;    color:#777;  }
.status_on  {    background-color:#fc0;    color:#fff;  }

.status_hot  {    background-color:#f60;    color:#fff;  }
.status_cold {    background-color:#9cf;    color:#369;  }

.smarthome_ob_smol .status_fault {
    font-size:16px;
}


div.weather {
	display:flex;
	align-items: center;
	margin-top:25px;
	margin-bottom:25px;
}
div.weather div {
	flex-grow:1;
	text-align:center;
	flex-basis:100px;
	line-height:170%;
}
div.big_temp {
	font-size:80px;
	margin:0;
	padding:0;
	margin-top:-30px;
	margin-bottom:-30px;
}
body.night div.big_temp {
	text-shadow:0 0 10px #000;
}
body.night div.temp_desc {
	text-shadow:0 0 3px #000;
	text-shadow:0 0 7px #000;
}
div.weather div svg {
	vertical-align: -4px;
	margin-right:4px;
	opacity:0.5;
	font-size:20px;
}


div#grid1.compact div#main_content {
	padding:15px;
	min-width:0;
	max-width:35vw;
}
div#grid1.compact #content img.in_article {
	max-width:160px;
	max-height:160px;
}
div#grid1.compact {
	--teaser-x:80px;
	--teaser-y:60px;
	--teaser-font-size:25px;	
	--teaser-line-height:70px;
}
div#grid1.compact div#grid2_spacer_left {
	max-width:0px;
}
div#grid1.compact_right div#grid2_spacer_left {
	max-width:none;
}
div#grid1.compact_right div#grid2_spacer_right {
	max-width:20px;
}

div#grid1.compact div#children div.element {
	margin-top:5px;
	margin-bottom:5px;
	padding:3px 10px 3px 10px;
}
div#grid1.compact div#children div.element div.caption {
	padding:3px 0 3px 0;
}



@media not all and (min-width: 1200px) {
	body {
		font-size:15px;
		--teaser-x:80px;
		--teaser-y:60px;
		--teaser-font-size:25px;	
		--teaser-line-height:70px;	
	}
	#main_navigation {	
		margin:10px 10px 10px 0px;
	}
	#main_navigation div.element {
		border-top-left-radius:0;
		border-bottom-left-radius:0;
		padding:10px 0 10px 0;
		min-width:100px;
		
	}
	div#center_dialog {
		padding-top:10px;
	}
	div.smarthome_warning_container {
		padding:10px;
	}
	div#main_content {
		padding:15px 20px 15px 20px;
	}
	div.smarthome_warning_container {
		margin-bottom:10px;
	}
	#shopping_cart {
		border-top-right-radius:0;
		border-bottom-right-radius:0;
		margin:10px 0 0 10px;
		width:200px;
		padding:10px;
	}
	.importance-low {
		display:none !important;
	}
	div.calendar_entry div.weather_text {
		display:none;
	}
}


@media not all and (min-width: 800px) {
	div#grid2 {
		flex-direction: column;
	}
	#main_navigation {
		
		flex-direction:row;		
		margin:10px 0px 10px 0px;
		width:auto;
	}
	#main_navigation div.element {
		margin:0;
		border-radius:0;
		padding:15px 10px 10px 10px;
		font-size:14px;
		flex-grow:1;
		box-shadow:none;
		flex-basis:10px;
		min-width:0;
		overflow:hidden;
	}
	#main_navigation div.element div.caption {
		font-size:11px;
		text-align:center;
		font-family: "Poppins";

	}
	div#main_map, div#smarthome_map_container {
		width:100%;
		height:360px;
		position:relative;
		display:block;
		top:0;
	}
	div#center_dialog {
		padding:0;
	}
	div.smarthome_warning_container {
		margin-bottom:10px;
		border-radius:0;
	}
	div#main_content, div#grid1.compact div#main_content {
		padding:10px;
		border-radius:0;
		max-width:none;
	}
	div#loading {
		display:none;
	}
	#shopping_cart {
		border-radius:0;
		margin:10px 0 0 0px;
		width:auto;
		padding:10px;
		max-width:100vw !important;
	}
	.importance-low, .importance-medium {
		display:none !important;
	}
}
	
@keyframes gradient {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}