@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Ubuntu:wght@400;700&display=swap');

p, h1, h2, h3, h4, h5, h6 {
	margin-block-start: 0px;
	margin-block-end: 0px;
}

body {
	color: white;
	background-color: black;
	margin: 0px;
	padding: 30px;
	font-family: 'Ubuntu', sans-serif;
	user-select: none;
	display: flex;
	flex-direction: column;
	width: calc(100vw - 60px);
	height: calc(100vh - 60px);
	overflow: hidden;
}

#titleRow {
	flex-grow: 0;
	padding-left: 1px;
}

.containerHead {
	margin-top: 20px;
	border: 10px solid #666666;
	padding: 10px;
	flex-grow: 0;
}

.containerBody {
	border-left: 10px solid #666666;
	border-right: 10px solid #666666;
	border-bottom: 10px solid #666666;
	flex-grow: 1;
}

#sourceMaps {
	font-family: 'Ubuntu', sans-serif;
	font-size: 20px;
	padding: 4px 8px;
	height: 34px;
}

.toggleShow {
	font-size: 20px;
	margin-left: 20px;
	padding: 3px 0px 4px 0px;
	color: #BBBBBB;
	background-color: black;
	cursor: pointer;
}

.toggleShow:hover {
	color: #FFFFAA;
}

.toggleShowDisabled, .toggleShowDisabled:hover {
	color: #888888 !important;
	padding: 3px 0px 0px 0px !important;
	border-bottom: none !important;
	cursor: default !important;
}

.toggleSelected, .toggleSelected:hover {
	padding: 3px 0px 2px 0px;
	color:white;
	border-bottom: 2px dashed white;
}

#inputTextArea {
	margin: 0px;
	padding: 10px;
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	resize: none;
	color: white;
	background-color: black;
	font-family: 'Source Code Pro', monospace;
	font-size: 18px;
	overflow-x: hidden;
	overflow-y: scroll;
}

#outputTextArea {
	width: 100%;
	height: 100%;
	position: relative;
}

#outputContent {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	overflow-x: hidden;
	overflow-y: scroll;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	font-family: 'Source Code Pro', monospace;
	font-size: 18px;
	padding: 10px;
	user-select: text;
}

#fetchingMessage {
	font-size: 20px;
	margin-left: 20px;
	padding: 4px 0px;
}

#firstLineSpan {
	float: right;
	font-size: 22px;
	vertical-align: middle;
}

#enableFirstLine {
	width: 21px;
	height: 21px;
	margin: 0px;
	vertical-align: middle;
	margin-right: 10px;
}

#firstLineValue {
	font-family: 'Source Code Pro', monospace;
	font-size: 16px;
	width: 80px;
	height: 30px;
	margin-left: 10px;
}

.darkModeScrollbar::-webkit-scrollbar, .darkModeScrollbar::-webkit-scrollbar-track {
	background-color: black;
	width: 15px;
}

.darkModeScrollbar::-webkit-scrollbar-button {
	display: none;
}

.darkModeScrollbar::-webkit-scrollbar-thumb, .darkModeScrollbar::-webkit-scrollbar-corner {
	background-color: #BBBBBB;
}

.darkModeScrollbar::-webkit-scrollbar-thumb:hover {
	background-color: white;
}