:root {
	--pre-width-toolbox: calc(46% - 4em);
	--toolbox-width-pre: calc(8% + 5em);
	--fide-tool-box-withe: 36%;

}

html {
	scroll-behavior: smooth;
}

body {
	padding: 0;
	margin: 0;
	font-family: Grotesk, "Helvetica Neue", Helvetica, sans-serif;
	font-size: .9rem;
	min-height: 100vh;
}

body.darkmode {
	filter: invert(1);
	backdrop-filter: invert(1%);
}

h1 {
	font-size: 3em;
	line-height: 1;
	margin-bottom: .1em;
	font-weight: 300;
}

h3 {
	font-size: 1.5em;
	line-height: 1;
	margin-bottom: 1em;
	margin-top: 1em;
}

a {
	text-decoration: none;
	color: #36c;
}

a:hover {
	text-decoration: underline;
}

#main {
	/*margin: 5px auto;*/
	margin: 0px auto;
	width: calc(100% - 2px);
}

pre.codeBlock, div.codeBlock {
	overflow: auto;
	margin: 0 0 1em;
	padding: .5em 1em;
}

pre.codeBlock .codeLine,
pre.codeBlock .line-number,
div.codeBlock .codeLine,
div.codeBlock .line-number {
	font: normal normal 10px/14px monospace;
	font-family: Monaco, monospace;
	color: black;
	display: block;
}

pre.codeBlock.codeBlock span.code, div.codeBlock span.code {
	min-width: 97%;
	display: inline-block;
}

pre.codeBlock .line-number, div.codeBlock .line-number {
	margin: 0 1em 0 -1em;
	border-right: 1px solid #eee;
	color: #bbb;
	text-align: right;
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */

	-o-user-select: none;
	user-select: none;
	padding-left: 0.2em;
	padding-right: 0.2em;
}

pre.codeBlock em.line-number {
	display: inline;
	margin: 0;
	min-width: 30px;
}

pre.codeBlock .line-number span, div.codeBlock .line-number span {
	display: block;
	padding: 0 .5em 0 1em;
}

pre.codeBlock .cl {
	display: block;
	clear: both;
}

div.diffcontainer {
	position: relative;
	margin: 0 auto;
	display: none;
}

div.left {
	width: 40%;
	display: inline-block;
}

div.right {
	width: 40%;
	display: inline-block;
	vertical-align: top;
}

div.center {
	width: 14%;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	margin-top: 20%;
	margin-left: 2%;
	text-align: center;
}

.ojs div.right.left{
	display: flex;
	width: 80%;
}

pre.codeBlock.left {
	width: 40%;
	display: inline-block;
	vertical-align: top;
}

pre.codeBlock.right {
	width: 40%;
	display: inline-block;
	vertical-align: top;
	margin-left: 1em;
}

ul.toolbar {
	width: calc(20% - 6em);
	display: inline-block;
	right: 10px;
	top: 8em;
	position: absolute;
}

#report .reportTitle {
	border: thin solid lightgray;
	border-radius: 4px;
	margin-bottom: 1em;
	padding: 5px;
	background-color: rgba(50, 57, 88, 0.1);
	color: black;
	width: 15em;
}


ul.toolbar li {
	border: thin solid lightgray;
	border-radius: 4px;
	margin-bottom: .5em;
	padding: 5px;
	background-color: rgba(50, 57, 88, 0.1);
	color: black;
	cursor: pointer;
	line-height: 16px;
	min-width: 80%;
}

.ToolbarShort ul.toolbar li {
	border: thin solid lightgray;
	border-radius: 4px;
	/*margin-bottom: .5em;*/
	padding: 5px;
	color: black;
	cursor: pointer;
	line-height: 16px;
	min-width: auto;
	margin: .25em;
	width: 16px;
	height: 16px;
	overflow: hidden;
}

.ToolbarShort ul.toolbar li *, .li-nr, b.diff-marker-tool.li-nr {
	display: none !important;
}

.ToolbarShort ul.toolbar li .li-nr, .ToolbarShort ul.toolbar li b.diff-marker-tool.li-nr {
	display: inline !important;
}

.jpdr ul.toolbar li {
	border: thin solid lightgray;
	border-radius: 4px;
	margin: 0em 0em .5em 0em;
	padding: 5px;
	background-color: rgba(50, 57, 88, 0.1);
	color: black;
	cursor: pointer;
	line-height: 16px;
	min-width: 80%;
	width: auto;
	height: auto;
}

ul.toolbar li code {
	margin: 0px 0px;
	padding: 0px 2px;
	border: 1px solid #eaeaea;
	background-color: #f8f8f8;
	border-radius: 3px;
	color: #333;
	line-height: 20px;
	font-family: Monaco, monospace;
	font-size: 0.85em;
}

#buttons {
	white-space: nowrap;
	margin-bottom: 1em;
}

#buttons a {
	color: #8a6d3b;
	font-size: 18px;
}

#buttons a.disabled {
	color: #999;
	cursor: auto;
}

#buttons a.disabled:hover {
	text-decoration: none;
	cursor: default;
}

#prevNextLabel {
	width: 80%;
	text-align: center;
	display: inline-block;
}

div.gutter {
	float: left;
}

div.codeLine span.diff {
	cursor: pointer;
	color: #c00;
}

div.codeLine span.eq_off, div.codeLine span.type_off, div.codeLine span.missing_off {
	cursor: auto;
}

div.codeLine span.eq {
	background: rgba(50, 57, 88, 0.1);
	color: #333;
}

div.codeLine span.type {
	background: rgba(220, 100, 100, 0.1);
}

div.codeLine span.missing {
	background: rgba(0, 160, 80, 0.1);
	color: green;
}

div.codeLine span.selected {
	background: #cef;
	color: #47e;
}

canvas.center {
	position: absolute;
	left: 40%;
	width: 20%;
	height: 100%;
	top: 0;
}

textarea {
	width: 100%;
	min-height: 500px;
	padding: 5px;
	background: #f3f3f3;
	border-radius: 4px;
	resize: vertical;
	white-space: pre;
	word-wrap: normal;
}

textarea.error {
	border-color: #FBC2C4;
}

pre.error {
	background: #FBE3E4;
	color: #D12F19;
	border: thin solid #FBC2C4;
	border-radius: 4px;
	padding: 1em;
	display: none;
}

span.filterBlock, div.controllInput {
	margin-bottom: 1em;
}

span.filterBlock input, div.controllInput input {
	margin-left: 2em;
}

#report {
	/*
	margin-bottom: 1em;
	min-height: .5em;
	*/

	margin-bottom: 0em;
	padding-bottom: 0em;
	position: relative;
	min-height: 0em;
}

#report button {
	display: block;
	position: absolute;
	top: 0;
	left: 56.5%;
	border-color: #36c;
	color: #36c;
}

button {
	font-size: 1.2em;
	color: #333;
	border: 1px solid #333;
	border-radius: 4px;
	background: white;
	padding: .5rem .7rem;
	cursor: pointer;
}

.weak {
	color: #333;
	max-width: 25rem;
	font-size: .9em;
	position: absolute;
	top: 29px;
	left: 56.5%;
	right: 3%;
	padding: 0 1em 0 0;
}

p {
	margin-bottom: 1em;
}

.header {
	height: 4em;
}

span.fileInput {
	margin-left: 2em;
	margin-top: 0.5em;
	display: inline-block;
}

.throbber-loader:not(:required) {
	display: none;
}

.progress .throbber-loader:not(:required) {
	display: block;
	margin: 5px auto;
}

.reportHeader {
	position: sticky;
	background-color: white;
	top: 56px;
	padding-top: 4px;
}

.report {
	padding-bottom: 1em;
	position: relative;
	/*height: 4em;*/
	/*top: 56px;*/

}

#report button {
	display: block;
	position: absolute;
	top: 0;
	left: 56.5%;
	border-color: #36c;
	color: #36c;
}

.tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #e1e1e1;
	color: #090909;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 10px 12px;
	transition: 0.3s;
	font-size: 1em;
}

.tab button sub, .tab button sup {
	font-size: .7em;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
	background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 6px 2px;
	border: 1px solid #ccc;
	border-top: none;
}

span.green, i.green {
	background-color: lightgreen;
	/*cursor: help;*/
}

span.red, i.red {
	background-color: lightpink;
	/*cursor: help;*/
}

span.onlySpace, span.yellow {
	background: yellow;
}

span.probablyIndent {
	background-color: blue;
}

i.red {
	color: lightpink;
}

i.green {
	color: lightgreen;
}

i.red, i.green {
	text-decoration: line-through;
}

span.onlySpace.showBlock, span.red.showBlock, span.green.showBlock, i.green.showBlock, i.red.showBlock, i.probablyIndent.showBlock, i.probablyIndent.showBlock, span.probablyIndent.showBlock, span.probablyIndent.showBlock {
	background-color: transparent;
}

i.green.showBlock, i.red.showBlock {
	color: transparent;
}

li.onlySpace.showBlock, li.red.showBlock, li.green.showBlock, li.probablyIndent.showBlock {
	display: none;
}


span.diff-marker-look, i.diff-marker-look, li.diff-marker-tool.diff-marker-look, ul li.liHighlithe {
	background-color: lightblue;
	order: -1;
}

.ToolbarShort span.diff-marker-look, .ToolbarShort i.diff-marker-look, .ToolbarShort li.diff-marker-tool.diff-marker-look {
	order: 0;
}

i.diff-marker-look {
	color: lightblue;
}


.btn-copy {
	/*border: solid 1px;*/
	display: inline-block;
	padding: 2px;
	border-radius: 67px;
	/*	width: 10px;
		height: 10px;*/
	text-align: center;
	cursor: pointer;
}

#RubyNoticeGeneral .btn-copy {
	border: solid 1px;
	display: inline-block;
	padding: 10px 15px;
	border-radius: 5px;
	width: auto;
	height: auto;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.5s ease;
}

#RubyNoticeGeneral .right {
	text-align: right;
}

#RubyNoticeGeneral .btn-copy:hover {
	background-color: lightblue;

}

.far .found, .jpdr .found,
.fo .kill, .frd .kill, .dmp .kill, .sp .kill {
	text-decoration-line: line-through;
	display: none;
}

.far .kill, .jpdr .kill,
.fo .found, .frd .found, .dmp .found, .sp .found {
	text-decoration-line: underline;
}

.fide {

}

#RubyNoticefide {
	display: flex;
	justify-content: space-between;
}

#RubyNoticefide .rubyKillernotice {
	width: calc((100% - var(--fide-tool-box-withe)) / 2 + 1em);
	padding: 1em;
	/*display: inline-block;*/
	display: none;
}

.flex-row {
	display: flex;
}

ul.toolbar {
	display: none;
	position: sticky;
}

.fide ul.toolbar, .sp ul.toolbar, .jpdr ul.toolbar {
	display: inline-block;
}

.flex-row .toolbar {
	width: var(--fide-tool-box-withe);
}

#toolbardmp, #toolbarfrd, #toolbarjpdr {
	display: inline-flex;
	/*flex-direction: column;*/
	align-items: center;
	width: var(--toolbox-width-pre);
	position: sticky;

	flex-wrap: wrap;

}

#toolbarojs {
	display: flex;
	flex-direction: column;
}

.diff-marker-tool b {
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
}

#toolbarfide {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.btn-row {
	display: flex;
	justify-content: space-around;
}

.antiselect {
	user-select: none;
}

.diffcontainer pre.codeBlock {
	width: calc(50% - 3em);
	font-size: smaller;
	padding-left: 0px;
	padding-right: 0px;
}

.dmp.diffcontainer pre.codeBlock, .frd.diffcontainer pre.codeBlock {
	white-space: pre-wrap;
}

.dmp.diffcontainer {
	/*	display: flex !important;
		flex-wrap: wrap;
		align-items: stretch;*/
}

#RubyNoticedmp {
	/*width: 100%;*/
}

.dmp.diffcontainer pre.codeBlock,
.frd.diffcontainer pre.codeBlock,
.dmp.diffcontainer pre.codeBlock.right,
.dmp.diffcontainer pre.codeBlock.left,
.jpdr.diffcontainer pre.codeBlock {
	/*display: inline-flex;
	flex-direction: column;*/
	width: var(--pre-width-toolbox);
}

.fide.diffcontainer pre.codeBlock,
.sp.diffcontainer pre.codeBlock {
	width: calc(40%);
}

ul.toolbar.toolrow, ul.toolrow {
	display: inline-flex;
}

.readme {
	display: inline-block;
	/*border: solid 1px black;*/
	/*border-radius: 100%;*/
	width: 12px;
	height: 12px;
}

.result-library, .result-library > .tab {
	position: sticky;
	top: 0;
	z-index: 10000;
}

.HeaderSetting, .tab {
	display: flex;
}

.UriSaver {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.UriSaver > span {
	display: flex;
	justify-content: space-between;
}

.UriSaver > span > a {
	margin-right: 1em;
}

#RubyNoticeGeneral {
	display: flex;
	flex-direction: column;
}

.rubyKillernotice {
	/*width: calc(40% + 1em);*/
	padding: 0.1em;
	display: inline-block;
	min-width: var(--pre-width-toolbox);
}

#RubyNoticeGeneral .rubyKillernotice {
	display: none;
}

.HeaderSetting {
	margin-left: auto;
	margin-right: 1em;
}

.colorModeSetting {
	display: flex;
	align-items: center;
}

.hidden, .diffcontainer button {
	display: none !important;
}

.diffcontainer .ojsControllRow > button {
	display: inherit !important;
	max-width: 10em;
}

/* Dropdown Button */
.dropbtn {
	/*	background-color: #04AA6D;
		color: white;*/
	padding: 3px;
	font-size: 16px;
	/*	border: solid 1px;*/
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	/*	background-color: #f1f1f1;*/
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	top: 0;
}

/* Links inside the dropdown */
.dropdown-content a {
	/*color: black;*/
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	/*background-color: #333;*/
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
	z-index: 9999;
	background-color: white;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
	/*background-color: #3e8e41;*/
}

.rebuild-btn {
	color: blue;
}

.ojsControllRow, .ojsDataControll {
	min-height: 7em;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-around;
	max-width: 16em;
	padding: 2em 0em;
}

.ojsInfoRow {
	display: flex;
	align-items: center;
	border-bottom-style: dashed;
	border-bottom-color: black;
	border-bottom-width: 1px;
	cursor: pointer;

}

.ojsInfoLabel {
	min-width: 13em;
}

.ojs .error.error-key {
	font-weight: bold;
}
.flex-row ul.toolbarUlojs{
	display: initial;
	width: auto;

	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
ul.toolbarUlojs li{
	display: inline-flex;
	flex-direction: column;
}
#schemaValidBlockShowPreErrosOjs{
	width: 100%;
}
#schemaValidBlockErrosOjs{
	min-width: 375px;
}
.toolbarHeaderControllojs{
	display: flex;
	flex-wrap: wrap;
}
.toolbarHeaderControllojs label {
	display: block;
	padding: 0 20px 0 0px;
}
#schemaValidBlockShowErrosOjs{
	width: calc(100% - 375px);
}