logic_schemes_editor/index.css

body {
	background-color: black;
	overflow: hidden;
}

.unselectable {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;           /* Non-prefixed version, currently
								  not supported by any browser */
}

/* remove input number arrows in Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* remove input number arrows in Firefox */
input[type=number] {
  -moz-appearance: textfield;
}



.sidePanel {
	position: absolute;
	width: 250px;
	height: calc(100% - 60px);
	background-color: rgba(70, 70, 80, 0.9);

	padding: 30px;
	overflow-y: auto;
}

::-webkit-scrollbar {
 width: 10px;
 height: 12px;
}
::-webkit-scrollbar-thumb {
 background: rgba(120, 120, 140, 1);
 border-radius: 4px;
 /*box-shadow: inset 6px 7px 11px #b6b6c0;*/
}
::-webkit-scrollbar-track{
 background: transparent;
 border-radius: 9px;
}

.sidePanel>* {
	box-sizing: border-box;
	width: 100%;
	padding: 20px;

	border: solid rgba(120, 120, 140, 1) 5px;
	border-radius: 20px;
}

.sidePanel>*>* {
	width: 100%;
	text-align: center;
}

.sidePanel>*:not(:first-child) {
	margin-top: 40px;
}

.sidePanel>*>*:not(:first-child) {
	margin-top: 10px;
}

.sidePanel .schemeName {
	width: calc(100% - calc(2 * 6px));
	padding: 0 6px;

	font-family: base_font;
	font-weight: bold;
	font-size: 20px;
	text-align: center;

	background-color: lightgrey;

	border: none;
	border-radius: 6px;
	outline: none;
}

.sidePanel button {
	font-family: base_font;
	font-weight: bold;
	font-size: 25px;
	border: none;
	border-radius: 50px;
	outline: none;
}

.sidePanel .controls .loadButton {
	margin-top: 25px;
}

.sidePanel .coverageInfo {
	font-family: base_font;
	font-size: 23px;
	color: LightSteelBlue;
}

.animated:not(:hover) {
	transition-duration: 0.3s;
}

.animated:hover {
	transition-duration: 0.5s;
	transform: scale(1.1);
}

.animated-green:not(:hover) {
	background-color: limegreen;
}

.animated-green:hover {
	background-color: rgb(150, 220, 150);
}

.animated-blue:not(:hover) {
	background-color: deepskyblue;
}

.animated-blue:hover {
	background-color: rgb(140, 200, 240);
}

.animated-lightblue:not(:hover) {
	background-color: LightSteelBlue;
}

.animated-lightblue:hover {
	background-color: rgb(210, 230, 250);
}

.animated-red:not(:hover) {
	background-color: LightCoral;
}

.animated-red:hover {
	background-color: rgb(220, 150, 150);
}

.sidePanel .block:not(:hover) {
	transition-duration: 0.3s;
}

.sidePanel .block:hover {
	transition-duration: 0.5s;
	transform: scale(1.15);
}

.sidePanel .block:not(:first-child) {
	margin-top: 20px;
}

.blockToAdd .name {
	background-color: transparent;
	width: 60%;
	border: none;
	padding: none;
	outline: none;
}

.inputsOutputsNumber {
	width: 100%;
	background: linear-gradient(90deg, transparent 0%, deepskyblue 30%, limegreen 70%, transparent 100%);
	margin-top: 10px;
	border-radius: 20%;
}

.inputsOutputsNumber>* {
	display: inline-block;
	width: 50%;
}

.inputsOutputsNumber input {
	width: 100%;
	background-color: transparent;

	font-family: base_font;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	
	border: none;
	padding: none;
	outline: none;
}

.inputsOutputsGroups {
	display: flex;
	justify-content: space-between;
	width : 100%;
}

.inputsOutputsGroups>* {
	width: calc(50% - 5px);
	height: 100%;
	border-radius: 5px;
}

.inputsGroups {
	background-color: deepskyblue;
}

.outputsGroups {
	background-color: limegreen;
}

.inputsOutputsGroups>*>* {
	padding: 3px 0;
	font-family: base_font;
	font-weight: bold;
	font-size: 20px;
}

.addBlockButton {
	width: 100%;
	height: 30px;

	font-size: 25px;

	border: none;
	border-radius: 30px;
	margin-top: 10px;
	outline: none;
}



.testsEditor {
	width: 100%;
	height: 100%;
}

.testsEditor .noInputsOutputsMessage {
	font-family: base_font;
	font-weight: bold;
	font-size: 25px;
}

.testsEditor .tables {
	display: flex;
	flex-wrap: nowrap;
}

.testsTableWrapper {
}

.testsTable {
	border-collapse: collapse;
	height: 100%;
}

.testsTable td {
	color: grey;
	height: 40px;
	font-size: 25px;
	padding: 10px;
}

.testsTable tr:not(:last-child) td {
	border-bottom: 1px solid grey;
}

.testsTable tr td:not(:last-child) {
	border-right: 1px solid grey;
}

.testsTable.inputs tr td:first-child {
	border: none;
}

.testsTable .checkbox.checked {
	transition-duration: 0.2s;
}

.testsTable .checkbox.unchecked {
	transition-duration: 0.2s;
}

.testsTable.inputs .checkbox.checked {
	background-color: limegreen;
}

.testsTable.inputs .checkbox.unchecked {
	background-color: rgb(170, 220, 170);
}

.testsTable.outputs .checkbox.checked {
	background-color: skyblue;
}

.testsTable.outputs .checkbox.unchecked {
	background-color: rgb(190, 220, 240);
}

.removeRowButton {
	width: 25px;
	height: 25px;
	background-color: LightCoral;
	color: lightgrey;
	font-weight: bold;
	font-size: 20px;
	border: none;
	border-radius: 5px;
	padding: 7px;
	outline: none;
}

.addRowButton {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 12px;
	background-color: LimeGreen;
	color: lightgrey;
	font-weight: bold;
	font-size: 20px;
	border: none;
	border-radius: 5px;
	padding: 7px;
	outline: none;
}



.blocksArea {
	width: 100vw;
	height: 100vh;
	background-color: black;
}

.schemeArea {
	width: 100%;
	height: 100%;
}

.blocksWrapper {
	position: absolute;
}

.block {
}

.block .content {
	display: flex;
	justify-content: space-around;
	align-content: center;

	background-color: lightgrey;

	padding: 15px 0px;

	border-radius: 45px;
	outline: none;
}

@font-face {
  font-family: 'base_font';
  font-style: normal;
  font-weight: 400;
  src: url(KellySlab-Regular.ttf);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.block .name {
	text-align: center;
	font-family: 'base_font';
	font-weight: bold;
	font-size: 30px;
	color: black;
	margin-top: auto;
	margin-bottom: auto;
	padding: 0 8px;
}

.inputs,
.outputs {
	height: 100%;
	margin: 0;
	padding: 0px 15px;
}

.input,
.output {
	width: 30px;
	height: 30px;
	border: solid black 15px;
	border-radius: 50%;
}

.input:not(:last-child),
.output:not(:last-child) {
	margin-bottom: 12px;
}

.input {
	background-color: limegreen;
}

.output {
	background-color: deepskyblue;
}

.groupSize {
	padding-top: 25%;
	font-family: base_font;
	font-weight: bold;
	text-align: center;
}

.wire {
	position: fixed;
	transform-origin: 0 center 0;
	z-index: 1;
}