@charset "UTF-8";

/* ======================================= 
   Window elements  
   ======================================= */
.my-desktop, .my-window {
	margin: 0rem 0rem 0rem 0rem;
	/*padding: .5rem 1rem;*/
	border-radius: 0.25rem !important;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	background-color: var(--surface3);
}

.my-desktop header, .my-window header {
	background-color: var(--surface4);
	padding: 0.5rem;
	display: grid;
	gap: 1rem;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr;
	align-items: center;
}

.my-desktop footer, .my-window footer {
	background-color: var(--surface4);
	padding: 0rem .5rem;
}

.my-window footer::after {
	position: absolute;
	width: 20px;
	height: 20px;
	right: 0px;
	bottom: 0px;
	/*background-color: var(--text1);*/
	content:
		url('data:image/svg+xml;utf8,<svg height="20px" width="20px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="none" stroke="#010101" stroke-miterlimit="10" stroke-width="4" points="37.96 59 61 59 61 35 37 59 37.96 59"></polygon></svg>');
	/*url('data:image/svg+xml;utf8,<svg height="100px" width="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline fill="none" stroke="gold" stroke-width="3" points="0,45 40,45 44,31 49,44 55,46 61,52 83,8 90,90 100,44 115,44 125,40 139,45 140,45,150,45 180,65 194,31 199,44 205,46 211,52 233,8 240,90 250,44 265,44 275,10 290,45 300,45, 320,45 360,65 394,31 399,44 405,46 411,52 433,8 440,90 450,44 465,44 475,40 490,45 500,45"></polyline></svg>');*/
}

.my-window main {
	padding: .5rem 1rem;
}

.my-desktop, .my-window-full {
	padding: 0;
	width: 100dvw !important;
	height: 100dvh !important;
}

.my-window-center {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.my-window-middle {
	margin: 0 auto 0 auto;
	height: 100svh;
}


.my-modal .hidden {
	display: none;
}

.my-overlay {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(3px);
	/*z-index: 10;*/
}


@media ( max-width : 600px) {
	.my-window-center:not(.my-fix-size) {
		max-width:none !important;
		width: 100svw !important;
		/*position: relative;*/
		transform: none;
		-webkit-transform: none;
		left: 0px;
		top: 0px;
	}
}


@media ( max-width : 800px) {
	.my-window-center {
		width: 80%;
	}
}