@charset "UTF-8";

/* ======================================= 
   Window elements  
   ======================================= */
.my-desktop {
	background: var(--desktop);
	transition: background-image 1s ease;
	color: var(--text);
	margin: 0;
	 height: 100vh;
}

.my-window {
	margin: 0rem 0rem 0rem 0rem;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 1fr auto;
	border-radius: 20px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
	overflow: hidden;

	background-color: var(--window);
	transition: background-color .5s ease;
}


.my-desktop header, .my-window header {
	background: var(--header);
	color: var(--header-text);
	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 {
	margin: 0rem 0rem 0rem 0rem;
	content: url('../media/iot-logo.png');
	width: clamp(3rem, 10vw, 4rem);
}


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

.my-window main {
	padding: .5rem 1rem;
	overflow-y: auto;
    max-height: 80vh;
}

.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(--window);
	max-width: 460px;
	width: 80%;
	border-radius: 16px;
  	box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  	transition: 0.4s ease;
}

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

@media ( max-width : 600px) {
	.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;
		border: unset !important; 
		border-radius: unset;
	}
	.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;
	}
}