* {
  box-sizing: border-box;
}

html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden
}

#app {
  display: flex;
  flex-flow: nowrap column;
  gap: 20px;
  padding: 15px;

  button, label, textarea, input {
	font-size: 12px;
  }


  > fieldset {
	border-radius: 6px;
	display: flex;
	flex-flow: nowrap column;
	padding: 15px;
	gap: 15px;

	&.show-result {
	  border: dotted 1px darkgray;
	  overflow: auto;
	  max-width: 90%;
	}

	> .row {
	  display: flex;
	  flex-flow: wrap row;
	  justify-content: space-between;
	  gap: 10px 15px;

	  > label {
		user-select: none;

		> input {
		  transform: translateY(1.5px);
		}
	  }
	}

	> .data-label {
	  display: flex;
	  flex-flow: nowrap column;
	  flex: 1;
	  gap: 6px;

	  > textarea {
		flex: 1;
		padding: 3px;
		outline: none;
		border-radius: 6px;
	  }
	}

	&.open {
	  flex: 1;

	  .save-btn {
		color: blueviolet;
		cursor: pointer;

		&:disabled {
		  cursor: not-allowed;
		  color: gray;
		}
	  }

	  &.errored {
		.msg-span {
		  color: red;
		}
	  }

	  &.unsaved {
		.msg-span {
		  color: orange;
		}
	  }
	}

  }
}