@charset "UTF-8";
/* Stylesheet for the jMini Compiler Tool
 * File name: compiler.css
 */

/* the compiler section: */
#jMini-Compiler {
	& {
		width: 100%;
		max-width: 60em;
		margin: .5em auto;
		font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		isolation: isolate;
	}
	.sr-only {
		position: fixed;
		left: -400pt;
		top: -400pt;
		width: auto;
		z-index: 9999;
		overflow: hidden;
	}
	& #jmc__tab1 {
		& > .errors {
			p {
				& {
					margin: 2pt 0;
					padding: .75em;
					display: grid;
					grid-template-columns: 1.5em auto min-content;
					justify-content: start;
					column-gap: .75em;
					border-radius: 2pt;
					border: #ccc solid 1px;
				}
				&[hidden] {
					display: none;
				}
				&::before {
					content: '';
					display: block;
					width: 1.5em; height: 1.5em;
					background: transparent none center no-repeat;
				}
				button {
					align-self: start;
				}
			}
			p.error {
				& {
					color: #A4000F;
					background-color: #FDF2F5;
					border-color: #F8D5DB;
				}
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3,16V9L8,4H15L20,9V16.03L15.03,21H8L3,16M8.39,5L4,9.39V15.6L8.4,20H14.61L19,15.61V9.39L14.61,5H8.39M11,8H12V13H11V8M11,15H12V17H11V15Z' style='fill:%23A4000F'/%3E%3C/svg%3E");
				}
			}
			p.warning {
				& {
					color: #715100;
					background-color: #FFFBD6;
					border-color: #F4E89A;
				}
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1,21L11.5,2.81L22,21H1M20.27,20L11.5,4.81L2.73,20H20.27M11,14V10H12V14H11M11,16H12V18H11V16Z' style='fill:%23BE9B00'/%3E%3C/svg%3E");
				}
			}
		}
		& > header {
			& {
				background-color: #FBFCFB;
				color: #1B1B1B;
				border: #ECEDEC solid 1px;
				padding: .75em .5em .75em 1.5em;
				margin: 1pt 0;
				border-radius: .75em .75em 1.5pt 1.5pt;
				display: grid;
				grid-template-columns: min-content auto max-content;
				column-gap: 1em;
				align-items: center;
				line-height: 2em;
				box-shadow: 0 1px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
				white-space: nowrap;
				font-weight: 600;
			}
			&:hover {
				background-color: #F4F7F9;
			}
			label {
				cursor: pointer;
				text-align: left;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			span.loading {
				& {
					display: grid;
					grid-template-columns: max-content 0;
					overflow: hidden;
				}
				&::before {
					content: '';
					display: inline-block;
					width: 2em; height: 2em;
					background: transparent url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%230077D4' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center no-repeat;
					background-size: 2em;
				}
			}
		}
		& > div.content {
			& {
				background-color: #FBFCFB;
				color: #1B1B1B;
				border: #ECEDEC solid 1px;
				padding: .5em 1em;
				margin: 1pt 0;
				box-shadow: 0 1px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
				line-height: 1.25em;
			}
			span.tdesc, span.mdesc {
				& {
					font-style: italic;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				&::before {
					content: '– ';
				}
			}
			details {
				summary {
					& {
						display: grid;
						grid-template-columns: min-content min-content min-content auto max-content 1.25em;
						column-gap: .5em;
						align-items: center;
						white-space: nowrap;
						font-weight: normal;
						line-height: 1.6;
						padding: .25em 0;
						cursor: pointer;
					}
					&:hover {
						background-color: #F4F7F9;
					}
					&::before {
						content: '';
						display: inline-block;
						background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5,13V12H11V6H12V12H18V13H12V19H11V13H5Z' style='fill:%230077D4' /%3E%3C/svg%3E") center no-repeat;
						width: 1.75em; height: 1.25em;
						margin: 0;
					}
					label {
						font-weight: 600;
						cursor: pointer;
					}
					a.tinfo {
						& {
							display: inline-block;
							height: 1.2em; width: 1.2em;
							overflow: hidden;
						}
						&::before {
							content: '';
							display: inline-block;
							width: 1.2em; height: 1.2em;
							background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5,3C16.75,3 21,7.25 21,12.5C21,17.75 16.75,22 11.5,22C6.25,22 2,17.75 2,12.5C2,7.25 6.25,3 11.5,3M11.5,4C6.81,4 3,7.81 3,12.5C3,17.19 6.81,21 11.5,21C16.19,21 20,17.19 20,12.5C20,7.81 16.19,4 11.5,4M11,8V10H12V8H11M11,12V17H12V12H11Z' style='fill:%230077D4'/%3E%3C/svg%3E") center no-repeat;
							margin-right: 1em;
						}
					}
				}
				&[open] summary::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5,13V12H18V13H5Z' style='fill:%230077D4' /%3E%3C/svg%3E");
				}
				ul {
					& {
						list-style: none inside;
						margin: 0; padding: 0;
					}
					li {
						& {
							display: grid;
							grid-template-columns: min-content min-content auto min-content 1.25em;
							column-gap: .5em;
							align-items: center;
							white-space: nowrap;
							line-height: 1.5;
							margin: .25em 0 .25em 3.7em;
						}
						&:hover {
							background-color: #EFEFEF;
						}
						&.error {
							color: #A4000F;
						}
						label {
							font-family: Consolas, "Lucida Console", "Courier New", monospace;
							font-size-adjust: 0.5;
							cursor: pointer;
						}
						a.minfo {
							& {
								display: inline-block;
								height: 1.2em; width: 1.2em;
								overflow: hidden;
							}
							&::before {
								content: '';
								display: inline-block;
								width: 1.2em; height: 1.2em;
								background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5,3C16.75,3 21,7.25 21,12.5C21,17.75 16.75,22 11.5,22C6.25,22 2,17.75 2,12.5C2,7.25 6.25,3 11.5,3M11.5,4C6.81,4 3,7.81 3,12.5C3,17.19 6.81,21 11.5,21C16.19,21 20,17.19 20,12.5C20,7.81 16.19,4 11.5,4M11,8V10H12V8H11M11,12V17H12V12H11Z' style='fill:%230077D4'/%3E%3C/svg%3E") right no-repeat;
								margin-right: 1em;
							}
						}
						.msize {
							font-style: italic;
							font-size: smaller;
						}
					}
				}
			}
		}
		& > footer {
			
			& > details {
				& {
					margin: 1pt 0;
					box-shadow: 0 1px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);

				}
				& > summary {
					& {
						background-color: #FBFCFB;
						color: #1B1B1B;
						border: #ECEDEC solid 1px;
						padding: 1em;
						margin: 0;
						display: grid;
						grid-template-columns: 1.5em auto 2em;
						align-items: center;
						column-gap: 1em;
						line-height: 2em;
						cursor: pointer;
						font-weight: 600;
						text-align: left;
					}
					&::marker {
						content: none;
						display: none;
					}
					&::before {
						content: '';
						display: inline-block;
						width: 1.5em;
						height: 1.5em;
						background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.59,15.5L17.77,14.2C18.07,13.12 18.09,11.95 17.77,10.78L19.59,9.5L18.14,7L16.11,7.92C15.32,7.12 14.32,6.5 13.15,6.21L12.95,4H10.05L9.85,6.21C8.68,6.5 7.68,7.12 6.89,7.92L4.86,7L3.41,9.5L5.23,10.78C4.91,11.95 4.93,13.12 5.23,14.2L3.41,15.5L4.86,18L6.89,17.07C7.68,17.86 8.68,18.46 9.85,18.77L10.05,21H12.95L13.15,18.77C14.32,18.46 15.32,17.86 16.11,17.07L18.14,18L19.59,15.5M13.5,3C13.77,3 14,3.2 14,3.46L14.18,5.5C14.94,5.78 15.62,6.19 16.23,6.68L18.08,5.81C18.31,5.69 18.6,5.77 18.74,6L20.74,9.5C20.88,9.71 20.8,10 20.58,10.15L18.91,11.32C19.04,12.12 19.03,12.91 18.91,13.68L20.58,14.85C20.8,15 20.88,15.29 20.74,15.5L18.74,19C18.6,19.21 18.31,19.29 18.08,19.17L16.23,18.31C15.62,18.8 14.94,19.2 14.18,19.5L14,21.5C14,21.79 13.77,22 13.5,22H9.5C9.22,22 9,21.78 9,21.5L8.82,19.5C8.06,19.2 7.38,18.8 6.77,18.31L4.92,19.17C4.69,19.29 4.4,19.21 4.26,19L2.26,15.5C2.12,15.29 2.2,15 2.42,14.85L4.09,13.68C3.97,12.91 3.96,12.12 4.09,11.32L2.42,10.15C2.2,10 2.12,9.71 2.26,9.5L4.26,6C4.4,5.77 4.69,5.69 4.92,5.81L6.77,6.68C7.38,6.19 8.06,5.78 8.82,5.5L9,3.46C9,3.2 9.23,3 9.5,3H13.5M11.5,9C13.43,9 15,10.57 15,12.5C15,14.43 13.43,16 11.5,16C9.57,16 8,14.43 8,12.5C8,10.57 9.57,9 11.5,9M11.5,10C10.12,10 9,11.12 9,12.5C9,13.88 10.12,15 11.5,15C12.88,15 14,13.88 14,12.5C14,11.12 12.88,10 11.5,10Z' fill='%231B1B1A'/%3E%3C/svg%3E") center no-repeat;
						background-size: 1.5em;
					}
					&::after {
						content: '';
						display: inline-block;
						width: 2em;
						height: 2em;
						background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.84,9.59L11.5,15.25L17.16,9.59L16.45,8.89L11.5,13.84L6.55,8.89L5.84,9.59Z' fill='%230077D4'/%3E%3C/svg%3E") center no-repeat;
						background-size: 2em;
						transform: rotateX(0deg);
						transition-duration: 400ms;
						transition-timing-function: ease-in-out;
					}
					&:hover {
						background-color: #F4F7F9;
					}
				}
				&[open] > summary::after {
					transform: rotateX(180deg);
				}
				& > fieldset {
					& {
						background-color: #FBFCFB;
						color: #1B1B1B;
						border: #ECEDEC solid 1px;
						border-top-width: 0;
						margin: 0; padding: 0;
					}
					p {
						& {
							display: grid;
							margin: 0;
							padding: .5em .6em 1em 3.5em;
							grid-template-columns: auto min-content;
							align-items: center;
							text-align: left;
						}
						&:hover {
							background-color: #F4F7F9;
						}
						input {
							min-width: 1.4em;
							min-height: 1.4em;
							cursor: pointer;
						}
						input[disabled] {
							cursor: not-allowed;
						}
					}
				}		
			}
			& > p {		
				& {
					margin: 1pt 0;
					background-color: #FBFCFB;
					color: #1B1B1B;
					border: #ECEDEC solid 1px;
					padding: 1em;
					text-align: center;
					border-radius: 1.5pt 1.5pt .75em .75em;
					box-shadow: 0 1px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
				}
				button {
					appearance: none;
					background-color: #0078D4;
					color: #FFF;
					padding: .5em 1.5em;
					border: #006DD2 solid 1pt;
					border-radius: .25em;
					cursor: pointer;
				}
				button:hover {
					background-color: #003E73;
				}
				button[disabled] {
					color: #646564;
					background-color: #FBFCFB;
					border-color: #E2E6E6;
					cursor: not-allowed;
				}
				button[disabled]:hover {
					background-color: #FBFCFB;
				}
			}
		}
	}
	& #jmc__tab2 {
		& {
			color: #1B1B1B;
			background-color: #FBFCFB;
			border: #ECEDEC solid 1px;
			padding: 1em;
			border-radius: .75em;
			box-shadow: 0 1px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
		}
		header {
			margin: 0 0 .5em 0;
			display: grid;
			grid-template-columns: auto auto;
			column-gap: .25em;
			justify-content: space-between;
		}
		button {
			& {
				appearance: none;
				border: transparent none 0;
				padding: .5em 1em;
				color: #404040;
				cursor: pointer;
				display: grid;
				grid-template-columns: 1.5em auto;
				column-gap: .25em;
				align-items: center;
			}
			&:hover {
				
			}
			&::before {
				content: '';
				display: inline-block;
				width: 1.5em; height: 1.5em;
				background: transparent none center no-repeat;
			}
			&[type="reset"] {
				& {
					background-color: transparent;
					border-radius: 1em;
					font-weight: 600;
				}
				&:hover {
					text-decoration: underline;
					background-color: #F4F7F9;
				}
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19,13H6.75L12,18.25L11.34,19L4.84,12.5L11.34,6L12,6.75L6.75,12H19V13Z' style='fill:%231F1F1F'/%3E%3C/svg%3E");
				}
			}
			&[type="submit"] {
				& {
					background-color: #0078D4;
					color: #FFF;
					border-radius: .5em;
				}
				&:hover {
					background-color: #003E73;
				}
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5,1C12.71,1 13.72,1.86 13.95,3H17C18.66,3 20,4.34 20,6V19C20,20.66 18.66,22 17,22H6C4.34,22 3,20.66 3,19V6C3,4.34 4.34,3 6,3H9.05C9.28,1.86 10.29,1 11.5,1M12.91,3C12.71,2.42 12.15,2 11.5,2C10.85,2 10.29,2.42 10.09,3H12.91M6,4C4.9,4 4,4.9 4,6V19C4,20.1 4.9,21 6,21H17C18.1,21 19,20.1 19,19V6C19,4.9 18.1,4 17,4H16V7H7V4H6M8,4V6H15V4H8Z' style='fill:%23FFF'/%3E%3C/svg%3E");
				}
			}
		}
		textarea {
			width: 100%;
			min-height: 24em;
			max-height: 64em;
			resize: vertical;
			white-space: pre;
			text-wrap: wrap;
			word-break: break-all;
			font-family: monospace;
			margin-bottom: 1em;
			padding: .25em .25em 1em .25em ;
			background-color: #FFF;
			font-size: small;
			scrollbar-gutter: auto;
			scrollbar-width: thin;
			scrollbar-color: #aaa #fbfaf9;
			border: #CCC solid 1px;
			box-shadow: inset .125em .125em .25em rgba(204, 204, 204, 0.6);
		}
	}
}

@media (max-width: 450px) {

	#jMini-Compiler {
		#jmc__tab1 {
			& > header {
				padding: .25em .75em;
				column-gap: .5em;
			}
			& > div.content {
				& {
					padding: .25em .5em;
				}
				span.tdesc, & span.mdesc {
					width: 0;
					overflow: hidden;
				}
				details {
					summary {
						& {
							column-gap: .25em;
						}
						&::before {
							width: 1.1em;
						}
					}
					ul li {
						& {
							grid-template-columns: min-content min-content auto min-content;
							column-gap: .25em;
							margin: .25em 0 .25em 2.25em;
						}
						a.minfo, span.msize {
							display: none;
						}
					}
				}
			}
		}
	}
}