@charset "UTF-8";

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

.my-desktop header, .my-window header {
	background-color: var(--surface4);
	padding: clamp(.1rem, .5vh, .5rem);
	display: grid;
	gap: .5rem;
	grid-template-columns: auto 3fr 1fr;
	grid-template-rows: 1fr;
	align-items: center;
	width: 100%;
}

.my-desktop header:nth-of-type(2) {
	margin: 1px 0px 0px 0px;
	grid-template-columns: 1fr 3fr 1fr;
}

header .my-logo {
	/*
	padding: .1rem .1rem .1rem .5rem;
	background-color: whitesmoke;
	border-radius: 50%;
	*/
	margin: 0rem 0rem 0rem 0rem;
	content: url('../media/csamborgo-logo.png');
	width: clamp(3rem, 10vw, 4rem);
}


/*
header .my-logo i {
	font-size: clamp(1rem, 4vh, 2.4rem);
	color: black;
}
*/

.my-desktop footer, .my-window footer {
	background-color: var(--surface4);
	/*padding: clamp(.1rem, .5vh, .5rem);*/
	display: grid;
	gap: 1rem;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr;
	align-items: center;
	width: 100%;
}
.my-desktop .my-footer-padding {
	padding: clamp(.1rem, .5vh, .5rem);
}

/*
.my-window footer::after {
	position: absolute;
	width: 20px;
	height: 20px;
	right: 0px;
	bottom: 0px;
	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>');
}
*/
.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 {
	background-color: var(--surface3);
	max-width: 460px;
	width: 80%;
}

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

@media ( max-width : 700px) {
	.my-window-center:not(.my-fix-size) {
		max-width: none !important;
		width: 100svw !important;
		min-height: 100svh !important;
		/*height: 100svh !important;*/
		/*position: relative;*/
		transform: none;
		-webkit-transform: none;
		left: 0px;
		top: 0px;
	}
	.my-window main {
		padding: 5px !important;
		margin-top: auto;
		margin-bottom: auto;
	}
}

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

@media ( max-width : 600px) {
	.my-window {
		width: 90%;
	}
	
	.my-modal {
		background-color: var(--surface3);
		max-width: 460px;
		width: 95%;
	}
}

@media ( min-width : 800px) {
	.my-window {
		min-width: 600px;
	}
}