@media screen and (max-width: 22rem) {
	body.public {
		& main {
			padding: 5rem 0rem 0rem 0rem !important;
			
			& div.children {
				& div.grid {
					grid-template-columns: 1fr !important;
					column-gap: 0 !important;
					row-gap: 0 !important;
				}
			}
		}

		& nav.side {
			& button {
				width: 1rem !important;
      			height: 3rem !important;
	
				& div.svg {
					width: 1rem !important;
					height: 1rem !important;
					margin-left: -0.25rem;
				}
	
				& span {
					display: none !important;
				}
			}
		}
	}
}

body.public {
	--back_color1: #f2f2f2;
	--back_color2: #d6d6d6;

	background: linear-gradient(180deg, var(--back_color1), var(--back_color2));
	height: 100vh;
	background-attachment: fixed;

	&.main {
		background: bottom 0 right 0 no-repeat url('../img/book_corner.webp'), linear-gradient(180deg, var(--back_color1), var(--back_color2));
		background-size: 35%;
		/* background-blend-mode: multiply; */
		background-attachment: fixed;
	}

	& nav.top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100dvw;
		min-height: 5rem;
		box-shadow: 1px 1px 0.14rem #80808080;
		background: linear-gradient(180deg, white, #dfdfdf);
		z-index: 2;

		display: grid;
		grid-template-columns: 10.5rem minmax(auto, 5rem) minmax(auto, 5rem) minmax(auto, 5rem) 1fr;

		& button {
			height: 100%;
			background-color: transparent;
			border: 0;
			align-self: center;
			text-align: center;
			cursor: pointer;
			border-right: 0.1rem dotted silver;

			& div.svg {
				display: inline-block;
				height: 1.5rem;
				width: 1.5rem;
			}

			& span {
				display: block;
				font-size: 75%;
				transition: margin-top 0.2s;
			}

			&:hover {
				background-color: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 96%);
			}

			&:hover span {
				margin-top: 0.4rem;
				text-decoration: underline;
			}
		}

		& div.filters {
			vertical-align: middle;
			align-self: center;
			padding: 0.1rem 0.5rem 0.1rem 0.5rem;
			overflow: hidden;
			max-height: 5rem;

			& div.filter {
				font-size: 75%;
				padding: 0.2rem 0.4rem;
				border-radius: 0.4rem;
				background-color: #b0b0b0;
				height: max-content;
				color: white;
				display: inline-block;
				margin: 0.1rem;
				white-space: nowrap;

				span.highlight {
					color: #ffff9f;
				}

				&:hover {
					background-color: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 77%);
				}

				&:not(.search) {
					user-select: none;
				}

				&:focus-within {
					& span {
						display: none;
					}

					& input.type {
						display: inline;
					}

					&.second input.data {
						display: inline;
					}
				}

				& input {
					height: 1rem;
					padding: 0 0.1rem;
					border: 0;
					border-bottom: 0.1rem dotted #ffff9f;
					background-color: transparent;
					color: white;
					display: none;

					&.type {
						width: 6rem;						
					}

					&.data {
						margin-left: 0.2rem;
						display: none;
						width: 4rem;
					}
				}

				& div.svg {
					margin-left: 0.2rem;
					display: inline-block;
					height: 1rem;
					width: 1rem;
					vertical-align: bottom;
					cursor: pointer;
				}
			}
		}
	}

	& nav.left {
		background-color: transparent;
		display: grid;
		width: 19rem;
		margin-left: -8rem;
		grid-template-rows: max-content 1fr;
		height: 5rem;
		position: absolute;
		box-shadow: 0.14rem 0.14rem 0.29rem transparent;
		transition: height 0.5s, margin-left 0.5s, background-color 0.5s;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		hyphens: auto;

		& p {
			margin: 0;
			overflow-wrap: break-word;
			position: relative;
		}

		& *:invalid {
			border-bottom-color: #df6d6d !important;
			box-shadow: none;
			color: #df6d6d !important;
		}

		/*&:hover,*/
		&.visible {
			background-color: white;
			height: 100dvh;
			width: 19rem;
			margin-left: 0;
			box-shadow: 0.14rem 0.14rem 0.29rem silver;

			& div.logo {
				font-size: 1.14rem;
				border-bottom: 1px dotted silver;
				padding-left: 0;
				cursor: pointer;

				& div.title.version {
					opacity: 1;
				}

				& div.title.login {
					opacity: 0;
				}
			}

			& div.member_area {
				opacity: 1;
			}
		}

		&.visible {
			div.member_ext {
				display: block;
			}
		}

		&.visible div.lock {
			display: block;
		}

		& div.lock {
			position: absolute;
			height: 1rem;
			width: 1rem;
			right: 0.5em;
			top: 0.4em;
			fill: #9c9c9c;
			display: none;
			cursor: pointer;
		}

		& div.logo {
			padding-left: 7.86rem;
			font-family: Life Savers;
			font-size: 0.67rem;
			transition: font-size 0.5s, padding-left 0.5s;
			user-select: none;
			cursor: pointer;

			& h1 {
				position: relative;
				font-size: 3em;
				font-weight: lighter;
				display: block;
				margin-left: auto;
				margin-right: auto;
				width: max-content;
				margin-bottom: 0;
				margin-top: 0.65em;
				padding-bottom: 0.55em;

				& div.top {
					position: absolute;
					top: -0.43em;
				}

				& div.wings {
					position: absolute;
					margin-left: -0.345em;
					top: -0.445em;
					width: 1em;
				}

				& div.title {
					position: absolute;
					width: 100%;
					transition: opacity 0.5s;
					font-size: 0.4em;
					text-align: center;
					font-weight: normal;
					margin-top: -0.2em
					/* display: none; */
				}

				& div.title.version {
					opacity: 0;
				}

				& div.title.login {
					opacity: 1;
				}
			}
		}

		& div.member_ext {
			display: none;
			position: fixed;
			inset: 0 0 0 19rem;
		}

		& div.member_area {
			font-family: Roboto Condensed;
			font-weight: lighter;
			font-size: 1.05rem;
			overflow: auto;
			opacity: 0;
			transition: opacity 0.5s;

			& div.pubpage {
				padding-left: 0.57rem;
				padding-right: 0.57rem;

				& div.dialogGrid {
					padding-right: 0.57rem;

					& div.template_task {
						margin-left: -1.71rem;
						margin-right: -0.57rem;
					}
				}

				/* & label {
                    font-size: 0.76rem;
                    font-weight: bold;
                } */

				& input {
					border-top: 0;
					border-left: 0;
					border-right: 0;
					border-bottom: 0.09rem dotted #606060;
					display: block;
					margin-bottom: 0.57rem;
					background: transparent;
					font-size: 1rem;
				}

				& input:autofill {
					background: transparent;
				}

				& hr {
					border-left: 0;
					border-right: 0;
					border-bottom: 0;
					border-top: 1px dotted silver;
				}

				& a {
					color: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 66%);
					text-decoration: none;

					&:hover {
						text-decoration: underline;
					}
				}
			}

			& div.modeSelector {
				border-bottom: 1px dotted var(--clr_global_border);
				margin-bottom: 1.71rem;
				display: grid;
				grid-template-rows: min-content;
				grid-template-columns: 1fr 7rem 1fr;

				& div.mode div.modeSvg {
					width: 2.57rem;
					margin: auto;
				}
			}

			& div.mode {
				margin: 0.57rem;
				padding: 0.57rem;
				text-align: center;
				fill: #999;
				user-select: none;

				&.noSelect {
					fill: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 60%);
					pointer-events: none;
				}

				&:hover {
					background: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 95%);
					border-radius: 0.29rem;
					cursor: pointer;
					fill: black;
				}
			}
		}

		& input {
			accent-color: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 86%);
		}
		
		& div.svg {
			cursor: pointer;
			display: inline-block;
		
			& svg {
				pointer-events: none;
			}
		}
		
		& div.dialogGrid {
			padding: 0 1.71rem 1.71rem 1.71rem;
			position: relative;
		}
		
		& div.dialogGrid div.svg.rowIcon {
			position: absolute;
			margin-left: -1.43rem;
			margin-top: 0.14rem;
		}
		
		& div.dialogGrid div.svg svg.rowIcon {
			fill: #adadad;
			height: 1em;
			width: 1em;
		}
		
		& h5 {
			font-weight: normal;
			text-decoration: underline;
			margin-bottom: 0.86rem;
			margin-top: 1.71rem;
		}

		& div.WarningText {
			border-radius: 0.4rem;
			border: 1px solid hsl(var(--clr_sel_hue), var(--clr_sel_sat), 77%);
			background-color: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 87%);
			padding: 0.2rem 0.4rem;
			font-size: 85%;
		}
		
		& div.template_task {
			position: relative;
			border: 1px solid hsl(var(--clr_sel_hue), var(--clr_sel_sat), 82%);
			/* border-radius: 0.29rem; */
			background-color: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 97%);
			padding: 0 0.57rem 0 0.57rem;
			margin: 0.29rem 0;
			box-shadow: 0.14rem 0.14rem 0.29rem #00000020;
		}
		
		& div.template_task_arrow {
			position: absolute;
			height: 0.43rem;
			width: 0.43rem;
			top: -0.25rem;
			background-color: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 97%);
			border-left: 1px solid hsl(var(--clr_sel_hue), var(--clr_sel_sat), 82%);
			border-top: 1px solid hsl(var(--clr_sel_hue), var(--clr_sel_sat), 82%);
			transform: rotate(45deg);
		}
		
		& div.template_slot {
			position: relative;
			/* border: 1px dotted silver;
			border-radius: 0.29rem; */
			margin: 0.29rem;
			padding: 0.29rem;
		}
		
		& svg.template_slotIcon {
			display: none;
			/* position: absolute;
			height: 1.52rem;
			width: 1.52rem;
			fill: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 66%);
			left: -1.79rem;
			top: -1px; */
		}
		
		& cmd-.disabled a {
			color: silver !important;
			cursor: default;
			pointer-events: none;
		}

		& task- {
			& div.closer {
				position: absolute;
				right: 0;
				height: 1.2em;
				width: 1.2em;
				cursor: pointer;
				z-index: 255;
		
				& svg {
					height: 1.2em;
					width: 1.2em;
					pointer-events: none;
				}
		
				&:hover svg {
					fill: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 66%);
				}
			}
		}
		
		& div.template_slot {
			position: relative;
			/* border: 1px dotted silver; */
			border-radius: 0.29rem;
			margin: 0.29rem;
			padding: 0.29rem;
		
		
			& h5 {
				margin-top: 0;
			}
		
			/* &.active {
				border: 1px dotted hsl(var(--clr_sel_hue), var(--clr_sel_sat), 50%);
				background-color: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 96%);
			} */
		
			&.disabled {
				color: silver !important;
				pointer-events: none;
		
				& svg {
					fill: #adadad;
				}
		
				& input {
					border-color: silver;
					color: silver;
				}
		
				& select {
					border-color: silver;
					color: silver;
				}
		
				& a {
					color: silver;
				}
			}
		}
	}

	& nav.side {
		& button {
			position: fixed;
			width: 2.5rem;
			height: 5rem;
			transition: width 0.5s, height 0.5s;

			border: 0;
			box-shadow: 1px 1px 0.14rem silver;
			background: linear-gradient(180deg, white, #dfdfdf);
			border-radius: 0 0.5rem 0.5rem 0;
			text-align: center;
			cursor: pointer;
			z-index: 1;

			&.back {
				left: 0;
				top: 10rem;
			}

			&.prev {
				left: 0;
				top: 16rem;
			}

			&.next {
				right: 0;
				top: 16rem;
				border-radius: 0.5rem 0 0 0.5rem;
			}

			& div.svg {
				display: inline-block;
				height: 1.5rem;
				width: 1.5rem;
			}

			& span {
				display: block;
				font-size: 75%;
				transition: margin-top 0.2s;
			}

			&:hover {
				background: hsl(var(--clr_sel_hue), var(--clr_sel_sat), 96%);
			}

			&:hover span {
				margin-top: 0.4rem;
				text-decoration: underline;
			}
		}
	}

	& main {
		padding: 6rem 3rem 1rem 3rem;
		transition: padding 0.5s;
		display: grid;
		grid-template-columns: 1fr minmax(0, 75rem) 1fr;

		& div.main {
			grid-column: 2;
		}

		& div.children {
			grid-column: 2;

			& h1 {
				font-family: Life Savers;
				font-weight: lighter;
				margin: 0;
				font-size: 1.5rem;
				margin-bottom: 1rem;
				border-bottom: 0.075rem solid #c0c0c080;

				& span.highlight {
					/* background-color: #b0b0b0; */
					color: grey;
					font-weight: normal;
					border-radius: 0.4rem;
				}
			}

			& div.grid {
				column-width: 20.5rem;
				column-count: auto;
				column-gap: 1rem;
			}
		}
	}
}

html {
	font-size: 10.5pt;
}

*:focus {
	outline: 0rem solid transparent;
}

* {
	box-sizing: border-box;
}

a, div, p, span, label {
	text-decoration-thickness: 0.075rem !important;
}

body {
	font-family: Roboto Condensed, Geneva, Tahoma, sans-serif;
	font-weight: 400;
	font-size: 1.05rem;
	margin: 0;
	padding: 0;
}