:after,:before {
	box-sizing: border-box;
	border: 0 solid #e5e7eb;
}

:after,:before {
	--tw-content: "";
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
	font-feature-settings: normal;
}

body {
	margin: 0;
	line-height: inherit;
}

hr {
	height: 0;
	color: inherit;
	border-top-width: 1px;
}

abbr:where([title]) {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
}

h1,h2,h3,h4,h5,h6 {
	font-size: inherit;
	font-weight: inherit;
}

a {
	color: inherit;
	text-decoration: underline;
}

b,strong {
	font-weight: bolder;
}

code,kbd,pre,samp {
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub,sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: initial;
}

sub {
	bottom: -.25em;
}

sup {
	top: -.5em;
}

table {
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse;
}

button,input,optgroup,select,textarea {
	font-family: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
}

button,select {
	text-transform: none;
}

[type=button],[type=reset],[type=submit],button {
	-webkit-appearance: button;
	background-color: initial;
	background-image: none;
}

:-moz-focusring {
	outline: auto;
}

:-moz-ui-invalid {
	box-shadow: none;
}

progress {
	vertical-align: initial;
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button {
	height: auto;
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

summary {
	display: list-item;
}

blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
	margin: 0;
}

fieldset {
	margin: 0;
}

fieldset,legend {
	padding: 0;
}

menu,ol,ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

input::-moz-placeholder,textarea::-moz-placeholder {
	opacity: 1;
	color: #9ca3af;
}

input::placeholder,textarea::placeholder {
	opacity: 1;
	color: #9ca3af;
}

[role=button],button {
	cursor: pointer;
}

:disabled {
	cursor: default;
}

audio,canvas,embed,iframe,img,object,svg,video {
	display: block;
	vertical-align: middle;
}

img,video {
	max-width: 100%;
	height: auto;
}

[hidden] {
	display: none;
}

*,::backdrop,:after,:before {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;--tw-pan-y:;
	--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;
	--tw-ordinal: ;--tw-slashed-zero:;
	--tw-numeric-figure: ;--tw-numeric-spacing:;
	--tw-numeric-fraction: ;--tw-ring-inset:;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: #3b82f680;
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;--tw-brightness:;
	--tw-contrast: ;--tw-grayscale:;
	--tw-hue-rotate: ;--tw-invert:;
	--tw-saturate: ;--tw-sepia:;
	--tw-drop-shadow: ;--tw-backdrop-blur:;
	--tw-backdrop-brightness: ;--tw-backdrop-contrast:;
	--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate:;
	--tw-backdrop-invert: ;--tw-backdrop-opacity:;
	--tw-backdrop-saturate: ;--tw-backdrop-sepia:;
}

main {
	top: 1rem;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	position: absolute;
	display: flex;
	gap: 3rem;
}

.pane {
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

#titletext {
	font-weight: 700;
}

#titletext:hover {
	--tw-text-opacity: 1;
	color: rgb(3 105 161/var(--tw-text-opacity));
}

#input {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	white-space: pre;
	overflow: scroll;
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
	width: 100%;
	height: 100%;
	border-radius: .25rem;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(148 163 184/var(--tw-border-opacity));
	padding: 1rem;
}

.controls {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.25rem;
}

#resultpane {
	width: 100%;
	height: 100%;
	border-radius: .25rem;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(148 163 184/var(--tw-border-opacity));
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#preview {
	width: 100%;
	height: 100%;
	gap: 1rem;
}

#result {
	width: 100%;
	height: 100%;
	gap: 1rem;
	white-space: pre-wrap;
	overflow: scroll;
}

/* modal */
/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	margin: 8% auto; /* 8% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	border-radius: .25rem;
	width: 70%; /* Could be more or less, depending on screen size */
	height: 80%;
}

.modal-content textarea {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	white-space: pre;
	overflow: scroll;
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
	width: 100%;
	height: auto;
        margin-bottom: 1rem;
	border-radius: .25rem;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(148 163 184/var(--tw-border-opacity));
	padding: 1rem;
}

/* The Close Button */
.close {
	color: #aaa;
	float: right;
	font-size: 36px;
	font-weight: bold;
        padding: 4px;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
#filter-open {
	background-color: #ccc;
	padding: 2px 6px 2px 6px;
	border-radius: 6px;
}
#filter-error {
	color: red;
	font-weight: "600";
	padding: 6px;
}
#timing {
	color: #555;
	font-size: 88%;
        margin: 0 auto;
}
.doclink {
        color: blue;
        text-decoration: underline;
        margin-left: 1em;
        margin-right: 1em;
}