body {
		font-family: "Noto Sans", sans-serif;
		/*   background: #fafafa; */
		padding: 0;
		margin: 0;
		background: black;
		color: white;
	}
	#DPL_Header {
		display: flex; /* Use Flexbox for the two columns */
		border-bottom: 2px solid white;
	}
	.nav {
		width:450px;
        flex-shrink: 0; 
		padding-right:5px;
	}
	#DPL_Title {
	   flex-grow: 1; 
		/* Prevent Flexbox from establishing a minimum size based on content */
		min-width: 0; 
		/* Text Truncation Properties: */
		white-space: nowrap; /* 1. Prevent wrapping */
		overflow: hidden;    /* 2. Hide overflow */
		text-overflow: ellipsis; /* 3. Add '...' */
		padding-right: 20px;
		text-align:right;
		padding-top:7px;
	}
	*,
	*:before,
	*:after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	nav ul,
	nav li {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	nav a {
		display: block;
		text-decoration: none;
	}
	
	nav a:hover,
	nav a:visited {
		text-decoration: none;
	}
	
	.menu-bar {
		background: black;
		display: flex;
	}
	
	.menu-bar-link {
		color: white !important;
		background: black !important;
	}
	
	.menu-link {
		/*padding: 20px 25px;*/
		padding: 7px 16px;
		padding-left: 25px;
		background: #ffffff;
		color: #177e89;
		transition: background 0.2s, color 0.2s;
		position: relative;
		z-index: 1;
	}
	
	.menu-link[aria-haspopup="true"] {
		padding-right: 40px;
	}
	
	.menu-link[aria-haspopup="true"]:after {
		content: "";
		background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Csymbol%20id%3D%22arrowRight%22%3E%3Ctitle%20transform%3D%22rotate(0%2024%2024)%22%20class%3D%22%22%20style%3D%22%22%3EIcon%3C%2Ftitle%3E%3Cpolygon%20points%3D%2231.028%2019.573%2019.975%208.52%2015.549%2012.948%2026.6%2024%2015.549%2035.052%2019.975%2039.479%2031.028%2028.427%2035.455%2024%2031.028%2019.573%22%20transform%3D%22rotate(0%2024%2024)%22%20class%3D%22%22%20style%3D%22%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cview%20id%3D%22default%22%20viewBox%3D%220%200%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22default%22%20xlink%3Ahref%3D%22%23arrowRight%22%20x%3D%220%22%20y%3D%220%22%20fill%3D%22%23000000%22%2F%3E%3Cview%20id%3D%22accent%22%20viewBox%3D%220%2048%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22accent%22%20xlink%3Ahref%3D%22%23arrowRight%22%20x%3D%220%22%20y%3D%2248%22%20fill%3D%22%23177E89%22%2F%3E%3Cview%20id%3D%22light%22%20viewBox%3D%220%2096%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22light%22%20xlink%3Ahref%3D%22%23arrowRight%22%20x%3D%220%22%20y%3D%2296%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
		background-size: 14px;
		width: 14px;
		height: 14px;
		font-size: 12px;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.mega-menu-header {
		font-size: 1.2em;
		text-transform: uppercase;
		font-weight: bold;
		color: #136a73;
	}
	
	.mega-menu {
		background: #ffffff;
		z-index: 10;
	}
	
	.mega-menu--multiLevel {
		flex-direction: column;
	}
	
	@media all and (min-width: 451px) {
		.nav {
			/*
                    margin-top: 50px;
                    background: #ffffff;*/
		}
		.nav > nav {
			margin: 0 auto;
		}
		.menu [aria-haspopup="true"] ~ ul {
			display: none;
		}
		.menu-bar {
			position: relative;
		}
		.menu-bar > li > [aria-haspopup="true"]:after {
			background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Csymbol%20id%3D%22arrowBottom%22%3E%3Ctitle%20transform%3D%22rotate(90%2024%2024)%22%20class%3D%22%22%20style%3D%22%22%3EIcon%3C%2Ftitle%3E%3Cpolygon%20points%3D%2231.028%2019.573%2019.975%208.52%2015.549%2012.948%2026.6%2024%2015.549%2035.052%2019.975%2039.479%2031.028%2028.427%2035.455%2024%2031.028%2019.573%22%20transform%3D%22rotate(90%2024%2024)%22%20class%3D%22%22%20style%3D%22%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cview%20id%3D%22default%22%20viewBox%3D%220%200%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22default%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%220%22%20fill%3D%22%23000000%22%2F%3E%3Cview%20id%3D%22accent%22%20viewBox%3D%220%2048%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22accent%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%2248%22%20fill%3D%22%23177E89%22%2F%3E%3Cview%20id%3D%22light%22%20viewBox%3D%220%2096%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22light%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%2296%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
		}
		.menu-bar > li > [aria-haspopup="true"]:hover:after {
			background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Csymbol%20id%3D%22arrowBottom%22%3E%3Ctitle%20transform%3D%22rotate(90%2024%2024)%22%20class%3D%22%22%20style%3D%22%22%3EIcon%3C%2Ftitle%3E%3Cpolygon%20points%3D%2231.028%2019.573%2019.975%208.52%2015.549%2012.948%2026.6%2024%2015.549%2035.052%2019.975%2039.479%2031.028%2028.427%2035.455%2024%2031.028%2019.573%22%20transform%3D%22rotate(90%2024%2024)%22%20class%3D%22%22%20style%3D%22%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cview%20id%3D%22default%22%20viewBox%3D%220%200%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22default%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%220%22%20fill%3D%22%23000000%22%2F%3E%3Cview%20id%3D%22accent%22%20viewBox%3D%220%2048%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22accent%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%2248%22%20fill%3D%22%23177E89%22%2F%3E%3Cview%20id%3D%22light%22%20viewBox%3D%220%2096%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22light%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%2296%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
		}
		.menu-bar > li > [aria-haspopup="true"]:hover ~ ul {
			display: flex;
			transform-origin: top;
			animation: dropdown 0.2s ease-out;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul:hover {
			display: flex;
		}
		.menu-bar > li:hover-within > [aria-haspopup="true"] ~ ul {
			display: flex;
		}
		.menu-bar > li > [aria-haspopup="true"]:hover,
		.menu-bar > li:hover-within > [aria-haspopup="true"],
		.menu-bar > li:hover > a {
			background: #177e89;
			color: #ffffff;
		}
		.menu-bar > li > [aria-haspopup="true"]:hover:after,
		.menu-bar > li:hover-within > [aria-haspopup="true"]:after,
		.menu-bar > li:hover > a:after {
			background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Csymbol%20id%3D%22arrowBottom%22%3E%3Ctitle%20transform%3D%22rotate(90%2024%2024)%22%20class%3D%22%22%20style%3D%22%22%3EIcon%3C%2Ftitle%3E%3Cpolygon%20points%3D%2231.028%2019.573%2019.975%208.52%2015.549%2012.948%2026.6%2024%2015.549%2035.052%2019.975%2039.479%2031.028%2028.427%2035.455%2024%2031.028%2019.573%22%20transform%3D%22rotate(-90%2024%2024)%22%20class%3D%22%22%20style%3D%22%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cview%20id%3D%22default%22%20viewBox%3D%220%200%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22default%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%220%22%20fill%3D%22%23000000%22%2F%3E%3Cview%20id%3D%22accent%22%20viewBox%3D%220%2048%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22accent%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%2248%22%20fill%3D%22%23177E89%22%2F%3E%3Cview%20id%3D%22light%22%20viewBox%3D%220%2096%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22light%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%2296%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
		}
		.mega-menu {
			position: absolute;
			top: 100%;
			/*left: 0;
                    width: 100%;*/
			width: max-content;
		}
		.mega-menu:hover {
			display: flex;
		}
		.mega-menu a:hover {
			background: #dceced;
			color: #136a73;
		}
		.mega-menu--multiLevel > li {
			/*width: 33.33333333%;*/
		}
		.mega-menu--multiLevel > li > [aria-haspopup="true"] ~ ul {
			left: 50%;
			/*width: 33.33333333%;*/
			width: max-content;
		}
		.mega-menu--multiLevel > li > [aria-haspopup="true"] ~ ul ul {
			width: 100%;
			left: 100%;
		}
		.mega-menu--multiLevel li:hover > [aria-haspopup="true"] ~ ul {
			display: block;
			transform-origin: left;
			animation: flyout 0.2s ease-out;
		}
		.mega-menu--multiLevel li:hover-within > [aria-haspopup="true"] ~ ul {
			display: block;
		}
		.mega-menu--multiLevel li:hover > [aria-haspopup="true"],
		.mega-menu--multiLevel li:hover-within > [aria-haspopup="true"],
		.mega-menu--multiLevel li:hover > a,
		.mega-menu--multiLevel li:hover-within > a {
			background: #dceced;
			color: #136a73;
		}
		.mega-menu--multiLevel [aria-haspopup="true"] ~ ul,
		.mega-menu--multiLevel [aria-haspopup="true"] {
			border-left: 1px solid #f0f0f0;
		}
		.mega-menu--multiLevel [aria-haspopup="true"] ~ ul:hover,
		.mega-menu--multiLevel [aria-haspopup="true"]:hover {
			display: block;
		}
		.mega-menu--multiLevel [aria-haspopup="true"] ~ ul {
			position: absolute;
			top: 50%;
			height: 100%;
		}
		.mega-menu--flat > * {
			flex: 1;
		}
		.mobile-menu-trigger,
		.mobile-menu-header,
		.mobile-menu-back-item {
			display: none;
		}
	}
	
	@media all and (max-width: 450px) {
		.nav {
			padding: 20px;
		}
		.mobile-menu-trigger,
		.mobile-menu-header,
		.mobile-menu-back-item {
			display: block;
		}
		.mobile-menu-trigger {
			background: #177e89;
			color: #ffffff;
			border: 0;
			padding: 10px;
			font-size: 1.2em;
			border-radius: 4px;
		}
		.mobile-menu-header {
			order: -1;
			background: grey;
		}
		.mobile-menu-header a {
			padding: 20px 25px;
			color: #ffffff;
			visibility: visible;
		}
		.menu-bar {
			flex-direction: column;
			position: fixed;
			top: 0;
			left: -100%;
			height: 100vh;
			width: 350px;
			max-width: 350px;
			max-width: 90%;
			overflow-x: hidden;
			transition: left 0.3s;
			box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.25);
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul {
			display: flex;
			flex-direction: column;
			background: #ffffff;
			position: absolute;
			left: 100%;
			top: 0;
			max-height: 100vh;
			width: 100%;
			transition: left 0.3s;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] {
			font-size: 1.2em;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul a {
			padding-left: 40px;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul a {
			padding-left: 80px;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"] {
			color: #2a2a2a;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"]:after {
			content: "+";
			background: none;
			font-size: 1em;
			font-weight: normal;
			height: 20px;
			line-height: 1;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"] ~ ul {
			max-height: 0px;
			transform-origin: top;
			transform: scaleY(0);
			transition: max-height 0.1s;
		}
		.mega-menu-content {
			padding: 20px 25px;
		}
		.mobile-menu-back-item {
			order: -1;
		}
		.mobile-menu-back-item a {
			background: #d9d9d9;
			color: #2a2a2a;
			max-height: calc(1.4em + 40px);
			margin-top: calc(0px - (1.4em + 40px));
			pointer-events: none;
		}
		.mobile-menu-back-item a:before {
			content: "";
			width: 14px;
			height: 12px;
			background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Csymbol%20id%3D%22arrowBottom%22%3E%3Ctitle%20transform%3D%22rotate(90%2024%2024)%22%20class%3D%22%22%20style%3D%22%22%3EIcon%3C%2Ftitle%3E%3Cpolygon%20points%3D%2231.028%2019.573%2019.975%208.52%2015.549%2012.948%2026.6%2024%2015.549%2035.052%2019.975%2039.479%2031.028%2028.427%2035.455%2024%2031.028%2019.573%22%20transform%3D%22rotate(-180%2024%2024)%22%20class%3D%22%22%20style%3D%22%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cview%20id%3D%22default%22%20viewBox%3D%220%200%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22default%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%220%22%20fill%3D%22%23000000%22%2F%3E%3Cview%20id%3D%22accent%22%20viewBox%3D%220%2048%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22accent%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%2248%22%20fill%3D%22%23177E89%22%2F%3E%3Cview%20id%3D%22light%22%20viewBox%3D%220%2096%2048%2048%22%2F%3E%3Cuse%20data-variant%3D%22light%22%20xlink%3Ahref%3D%22%23arrowBottom%22%20x%3D%220%22%20y%3D%2296%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
			background-size: 14px;
			margin-right: 10px;
			display: inline-block;
		}
		.mobile-menu-trigger:focus ~ ul {
			left: 0;
		}
		.menu-bar:hover,
		.menu-bar:focus-within {
			left: 0;
		}
		.menu-bar > li > [aria-haspopup="true"]:focus ~ ul {
			left: 0;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul {
			margin-top: calc(1.4em + 40px);
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul:hover,
		.menu-bar > li > [aria-haspopup="true"] ~ ul:focus-within {
			left: 0;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"]:focus ~ ul {
			max-height: 500px;
			animation: dropdown 0.3s forwards;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul li:focus-within > [aria-haspopup="true"] ~ ul {
			max-height: 500px;
			transform: scaleY(1);
		}
		.menu-bar > li:focus-within ~ .mobile-menu-header a {
			visibility: hidden;
		}
	}
	
	@media all and (max-width: 450px) and (hover: none) {
		.mobile-menu-trigger:hover ~ ul {
			left: 0;
		}
		.menu-bar > li > [aria-haspopup="true"]:hover ~ ul {
			left: 0;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul:hover {
			left: 0;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"]:hover ~ ul {
			max-height: 500px;
			animation: dropdown 0.3s forwards;
		}
		.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"] ~ ul:hover {
			max-height: 500px;
			transform: scaleY(1);
		}
		.menu-bar > li:hover ~ .mobile-menu-header a {
			visibility: hidden;
		}
	}
	
	@keyframes dropdown {
		0% {
			opacity: 0;
			transform: scaleY(0);
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: scaleY(1);
		}
	}
	
	@keyframes flyout {
		0% {
			opacity: 0;
			transform: scaleX(0);
		}
		100% {
			opacity: 1;
			transform: scaleX(1);
		}
	}
	
	#DPL_Container {
		overflow: auto;
		height: calc(100vh - 45px);
		position: relative;
	}
	
	#FirstTimeOpen {
		padding: 10px;
		background-color: linen;
		border-radius: 20px;	
	}
	#FirstTimeOpen:hover {
		background-color: hsl(160 100% 75% / 0.9);
	}
	.e-dialog {
		box-shadow: 0 4px 5px rgb(0 0 0 / 30%);
		border-radius: 8px;
		border: none;
		top: 0px;
		bottom: 0px;
		width: 80%;
		padding: 4px 0px;
	}
	
	.e-dialog header {
		padding: 0px 4px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2px solid grey
	}
	
	.e-dialog header h2 {
		margin-block: 0px;
	}
	
	.e-dialog main {
		padding: 4px 4px;
		padding-top: 10px;
	}
	
	.e-dialog footer {
		border-top: 2px solid grey;
		padding: 4px 10px;
		justify-content: space-between;
		gap: 0.5rem;
		margin: 0;
		height: 30px;
	}
	
	.e-dialog footer button {
		width: 66px;
	}
	
	.leftSideEdit {
		width: 49%;
		display: inline-block;
		height: 60vh;
	}
	
	.rightSideEdit {
		width: 49%;
		float: right;
		display: inline-block;
		height: 60vh;
	}
	
	.rightSideEdit > div {
		height: 60vh;
		width: 100%;
		height: 100%;
		flex-direction: column;
	}
	
	.addEditEntries {
		padding-bottom: 8px;
	}
	
	.filterSelect {
		overflow: auto;
	}
	
	#photoEditImage {
		object-fit: contain;
		width: 100%;
	}
	
	.addEditNext {
		float: right;
	}
	
	#fullDisplay {
		align-items: center;
		display: flex;
		user-select: none;
		justify-content: center;
		position: absolute;
		top: 45px;
		bottom: 0px;
		left: 3vw;
		width: 90vw;
		height: 90vh;
	}
	
	.dialogFilter header {
		margin-bottom: 5px;
		border-bottom: 1px solid grey;
		padding-bottom: 2px;
	}
	
	#addElement:modal {
		border: 2px solid grey;
	}
	
	#openFolderContainer {
		padding: 10px;
		width: 100%;
		height: 450px;
		background-color: #444;
		color: white;
		border: 2px solid grey;
	}
	
	#openHeader {
		display: flex;
	}
	
	#OpenBodyPart th {
		font-size: 12px;
	}
	
	#OpenBodyPart td {
		font-size: 15px;
	}
	
	#openFooter {
		bottom: 0;
	}
	
	.folderIcon {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 512 512'%3E%3Cpath fill='%2386e637' d='M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z'/%3E%3C/svg%3E");
		margin-right: 6px;
		display: inline-block;
		width: 15px;
		height: 12px;
	}
	
	.driveIcon {
		background-image: url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 0.32 0.32' xmlns='http://www.w3.org/2000/svg' fill='yellow'%3E%3Cg fill='yellow'%3E%3Cpath d='M0.06 0.225a0.015 0.015 0 0 1 0.015 -0.015h0.01a0.015 0.015 0 0 1 0 0.03h-0.01a0.015 0.015 0 0 1 -0.015 -0.015z'/%3E%3Cpath fill-rule='evenodd' d='M0.095 0.02a0.045 0.045 0 0 0 -0.041 0.027L0.004 0.165a0.045 0.045 0 0 0 -0.004 0.018v0.073A0.045 0.045 0 0 0 0.045 0.3h0.23A0.045 0.045 0 0 0 0.32 0.255V0.182c0 -0.006 -0.001 -0.012 -0.004 -0.018L0.266 0.047A0.045 0.045 0 0 0 0.225 0.02H0.095zm-0.014 0.039a0.015 0.015 0 0 1 0.014 -0.009h0.13c0.006 0 0.011 0.004 0.014 0.009L0.282 0.16H0.038l0.043 -0.101zM0.03 0.19v0.065c0 0.008 0.007 0.015 0.015 0.015h0.23a0.015 0.015 0 0 0 0.015 -0.015V0.19h-0.26z' clip-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
		margin-right: 6px;
		display: inline-block;
		width: 16px;
		height: 15px;
	}
	
	#openFooter {
		text-align: right;
	}
	
	#openFooter button {
		color: white;
		margin-top: 5px;
		margin-right: 10px;
		background-color: #666;
	}
	
	::-webkit-scrollbar {
		width: 10px;
	}
	
	::-webkit-scrollbar-track {
		background: #444;
	}
	
	::-webkit-scrollbar-thumb {
		background: #ccc;
	}
	
	#alertDialog {
		border-radius: 10px;
		border: 0px solid transparent;
		padding: 0px;
		max-width: 75dvw;
		width:fit-content;
		top: 0px;
		bottom: 0px;
		z-index: 1000;
	}
	
	#alertDialog header {
		color: white;
		background-color: #44c;
		margin: 0px;
		padding: 4px;
		border-bottom: 2px solid grey;
	}
	
	#alertOkButton {
		float: right;
		margin-right:10px;
		margin-bottom:10px;
	}
	
	#alertCancelButton {
		float: right;
		margin-right:10px;
		margin-bottom:10px;
	}

	#alertTitle {
		display: inline-block;
		padding: 0px;
		padding-right:30px;
		margin: 0px;
		font-size: 12px;
		padding-left: 6px;
	}
	
	#alertMessage {
		font-size: 1em;
		padding-bottom: 0px;
		padding: 10px;
		background-color: #;
		min-height: 40px;
		margin-bottom: 5px;
	}
	
	#alertClose {
		width: 47px;
		padding: 6px;
		border-radius: 15px;
		border: 0px solid transparent;
		color: white;
		background-color: #44a;
		float: right;
		margin-right: 10px;
		margin-bottom: 6px;
	}
	
	div#container-sm a {
		border: 2px solid #444;
	}
	
	#container-sm a .custom-checkbox {
	  /* Set the desired size for your clickable area */
	  z-index: 1;
	  display: flex;
	  width: 40px;
	  height: 40px;
	  position:absolute;
	  border-radius: 4px;
	  cursor: pointer;
	  justify-content: flex-start;
      align-items: flex-start;	  
	  /* Optional: Add hover effect to visually indicate it's clickable */
	  transition: background-color 0.2s ease-in-out;
	}

	#container-sm a .custom-checkbox:hover {
	  background-color: #f0f0f0;
	}

	/* Style the checkbox itself to remove any default margins */
	#container-sm a .custom-checkbox input[type="checkbox"] {
		margin: 0;
		margin-top: 5px;
		margin-left: 5px;
}	}
	
	.dropbtn:after {
		content: "\25be";
		font-size: 16pt;
		float: right;
		color: white;
	}
	
	.selectMark:before {
		content: '\2714';
		margin-left: -19px;
		padding-right: 5px;
	}
	
	.ascMark:before {
		content: '\25B2';
		margin-left: -19px;
		padding-right: 5px;
	}
	
	.dscMark:before {
		content: "\25BC";
		margin-left: -19px;
		padding-right: 5px;
	}
	
	.flowing {
		display: flex;
		flex-wrap: wrap;
	}
	
	.flowing::after {
		content: '';
		flex-grow: 1e4;
		min-width: 20%;
	}
	
	.flowing a {
		margin: 2px;
		/*background-color: violet;*/
		position: relative;
	}
	
	.flowing i {
		display: block;
	}
	
	.flowing img {
		position: absolute;
		top: 0;
		width: 100%;
		vertical-align: bottom;
	}
		user-select: none;
		cursor: pointer;
		-ms-overflow-style: none;
		/* IE and Edge */
		scrollbar-width: none;
		/* Firefox */
	}
	
	.slideshowitems::-webkit-scrollbar {
		display: none;
	}
	
	.slideshowitem:hover {
		cursor: -webkit-grabbing;
		margin: 0px;
		border: 2px solid yellow;
	}
	
	.slideshowitem {
		display: inline-block;
		margin: 2px;
	}
	/* contain caption to image width https://codepen.io/palash/pen/BYyXjq */
	
	.container {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		border: 1px solid white;
		transition: opacity 200ms;
	}
	
	.container::after {
		background: #000;
		content: attr(data-caption);
		line-height: 15px;
		padding: 0 1rem;
		color: white;
		font-size: 12px;
	}
	
	.slideShowLeftButton,
	.slideShowRightButton {
		background-color: transparent;
		width: 80px;
		height: 80px;
		margin-top: -40px;
		border: none;
		position: relative;
		z-index: 5;
	}
	
	.slideShowLeftButton:hover div {
		border-right: 25px solid lightgreen;
	}
	
	.slideShowLeftArrow {
		width: 0;
		height: 0;
		margin: 5px;
		border-top: 18px solid transparent;
		background-color: transparent;
		border-bottom: 18px solid transparent;
		border-right: 25px solid transparent;
	}
	
	.slideShowRightButton:hover div {
		border-left: 25px solid lightgreen;
	}
	
	.slideShowRightArrow {
		width: 0;
		height: 0;
		margin: 5px;
		border-top: 18px solid transparent;
		background-color: transparent;
		border-bottom: 18px solid transparent;
		border-left: 25px solid transparent;
		margin-left: 40px;
	}

	#editorDialog { border: none; border-radius: 12px; padding: 0; width: 900px; height: 700px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
	#editorDialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
	#editorDialog .dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 24px; border-bottom: 1px solid #e0e0e0; background: #fff; border-radius: 12px 12px 0 0; }
	#editorDialog .dialog-header h2 { font-size: 20px; font-weight: 600; color: #333; }
	#editorDialog .tabs { display: flex; gap: 4px; padding: 0 24px; background: #fff; border-bottom: 2px solid #e0e0e0; }
	#editorDialog .tab { padding: 12px 24px; border: none; background: transparent; color: #666; font-size: 14px; font-weight: 500; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; position: relative; top: 2px; }
	#editorDialog .tab:hover { color: #4285f4; background: #f8fbff; }
	#editorDialog .tab.active { color: #4285f4; border-bottom-color: #4285f4; }
	#editorDialog .dialog-content { display: flex; background: #fff; max-height: calc(95vh - 220px); }
	#editorDialog .canvas-section { flex: 1; display: flex; justify-content: center; align-items: center; padding: 24px; background: #2a2a2a; min-width: 0; position: relative; }
	#editorDialog .canvas-container { position: relative; display: inline-block; }
	#editorDialog #imageCanvas { max-width: 100%; max-height: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: block; }
	#editorDialog #overlayCanvas { position: absolute; top: 0; left: 0; pointer-events: none; display: none; }
	#editorDialog #overlayCanvas.active { display: block; }
	#editorDialog .crop-overlay { position: absolute; border: 2px solid #fff; cursor: move; display: none; z-index: 10; box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.5); pointer-events: all; }
	#editorDialog .crop-overlay.active { display: block; }
	#editorDialog .resize-handle { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid #4285f4; border-radius: 50%; pointer-events: all; cursor: pointer; }
	#editorDialog .resize-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
	#editorDialog .resize-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
	#editorDialog .resize-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
	#editorDialog .resize-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }
	#editorDialog .resize-handle.n { top: -6px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
	#editorDialog .resize-handle.s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
	#editorDialog .resize-handle.w { top: 50%; left: -6px; transform: translateY(-50%); cursor: w-resize; }
    #editorDialog .resize-handle.e { top: 50%; right: -6px; transform: translateY(-50%); cursor: e-resize; }
	#editorDialog .resize-handle#editorDialog .e { top: 50%; right: -6px; transform: translateY(-50%); cursor: e-resize; }
	#editorDialog .controls-section { width: 200px; height:508px; padding: 24px; background: #f9f9f9; overflow-y: auto; border-left: 1px solid #e0e0e0; }
	#editorDialog .tab-content { display: none; }
	#editorDialog .tab-content.active { display: block; }
	#editorDialog .control-group { margin-bottom: 20px; }
	#editorDialog .control-group h4 { font-size: 13px; font-weight: 600; color: #666; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
	#editorDialog .control-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #555; }
	#editorDialog .control-value { font-weight: 600; color: #4285f4; min-width: 60px; text-align: right; }
	#editorDialog .slider { width: 100%; height: 6px; border-radius: 3px; background: #e0e0e0; outline: none; -webkit-appearance: none; }
	#editorDialog .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #4285f4; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
	#editorDialog .slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #4285f4; cursor: pointer; border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
	#editorDialog .button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
	#editorDialog .button-grid-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
	#editorDialog .control-btn { padding: 10px 12px; border: 2px solid #e0e0e0; background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: #555; transition: all 0.2s; text-align: center; }
	#editorDialog .control-btn:hover { border-color: #4285f4; color: #4285f4; background: #f8fbff; }
	#editorDialog .control-btn.active { background: #4285f4; border-color: #4285f4; color: #fff; }
	#editorDialog .reset-btn { width: 100%; padding: 8px 12px; border: 1px solid #dc3545; background: #fff; color: #dc3545; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; }
	#editorDialog .reset-btn:hover { background: #dc3545; color: #fff; }
	#editorDialog .dialog-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid #e0e0e0; background: #f9f9f9; border-radius: 0 0 12px 12px; }
	#editorDialog .btn { padding: 10px 24px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
	#editorDialog .btn-cancel { background: #ffeaea; border: 2px solid #ddd; }
	#editorDialog .btn-cancel:hover { background: #ffcaca; }
	#editorDialog .btn-apply { background: #fffeea; border: 2px solid #ddd;  }
	#editorDialog .btn-apply:hover { background: #fffeca; }
	#editorDialog .btn-save { background: #eaffea;border: 2px solid #ddd; }
	#editorDialog .btn-disabled {background: #f1e8e8;border: 1px solid #ddd;color: grey;}
	#editorDialog .btn-save:hover { background: #caffca; }
	#editorDialog .test-controls { text-align: center; margin-bottom: 20px; }
	#editorDialog .test-controls input { display: none; }
	#editorDialog .test-controls label { display: inline-block; padding: 12px 24px; background: #4285f4; color: #fff; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
	#editorDialog .test-controls label:hover { background: #357ae8; }
	#editorDialog .accordion-container {margin: 2rem auto;border: 1px solid #ccc;border-radius: 8px; background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
	#editorDialog .accordion-item {border-bottom: 1px solid #eee;}
	#editorDialog .accordion-item:last-child { border-bottom: none;}
	#editorDialog .accordion-header {display: flex;justify-content: flex-end;align-items: center;font-weight: bold;cursor: pointer;background-color: #f7f7f7; user-select: none;}
	#editorDialog .accordion-header:hover {background-color: #e9e9e9;}
	#editorDialog .accordion-content {padding: 0 1rem;overflow: hidden;max-height: 0;transition: max-height 0.3s ease-out;}
	#editorDialog details[open] .accordion-content {max-height: 500px; padding: 1rem;padding-top: 0px;}
	#editorDialog details > summary {list-style: none;}
	#editorDialog details > summary::-webkit-details-marker {display: none;}
	#editorDialog .accordion-header::after {content: '+';transition: transform 0.3s ease-out;font-size: 1.2em;margin-left: 1rem;}
	#editorDialog details[open] .accordion-header::after {content: '−';}
 
	.nav-arrow {
            position: absolute;
			outline: transparent;
			padding-top: 30%;
			padding-bottom: 30%;
            top: 50%;
            transform: translateY(-50%);
            padding-left:5%
			padding-right:5%;
            background: transparent;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 64px;
            color: white;
            opacity: 0;
            transition: opacity 0.3s, background 0.2s;
            z-index: 10;
        }

        .nav-arrow:hover {
            opacity: 1;
        }

        .nav-arrow.left {
            left: 			0px;
			padding-right:  10%;
			padding-top:    30%;
			padding-bottom: 30%
        }
		.nav-arrow.left .fullScreenLeftArrow {
			border: 25px solid lightgreen;
			width: 0;
			height: 0;
			margin: 5px;
			border-top: 18px solid transparent;
			background-color: transparent;
			border-bottom: 18px solid transparent;
			border-left: 25px solid transparent;
			margin-left: 40px;			
		}

        .nav-arrow.right {
            right: 			0px;
			padding-left:   10%;
			padding-top:    30%;
			padding-bottom: 30%
        }
		.nav-arrow.right .fullScreenRightArrow {
			width: 0;
			height: 0;
			margin: 5px;
			border-top: 18px solid transparent;
			background-color: transparent;
			border-bottom: 18px solid transparent;
			border-right: 25px solid transparent;
			border-left: 25px solid lightgreen;
			margin-left: 40px;
	}