* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-size: 10.85px;
}
body {
	padding: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	width: 100%;
}
#categorias {
	display: flex;
	width: 84.5vw;
	flex-wrap: wrap;
}
.label-holder {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
	border: 2px solid #9b9b9b;
	border-radius: 12px;
	padding: 0.8em;
}
h3 + .label-holder {
	margin-bottom: 0.8em;
}
.label-holder label {
	border: 2px solid #c5c5c5;
	padding: 0.6em;
	border-radius: 1em;
	display: block;
	width: fit-content;
	cursor: pointer;
	transition: ease-in all 0.2s;
	font-weight: 500;

	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
.label-holder label:hover {
	background-color: #dadada;
}
.label-holder .checked,
.label-holder .checked:hover {
	/* background-color: #dadada;
    border: 2px solid #444444; */
	background-color: #7e7e7e;
	border: 2px solid #7e7e7e;
	color: white;
}

#labels {
	display: none;
}
#control-panel {
	gap: 1em;
	display: flex;
	width: 100%;
	justify-content: center;
}
#control-panel input {
	width: 12.3em;
	border: 2px solid #808080;
}
#control-panel input,
button,
textarea {
	padding: 0.3em;
	font-size: 15px;
	border-radius: 0.4em;
	transition: ease-in all 0.1s;
}

button {
	cursor: pointer;
	border: 2px solid #1e9779;
}
#b1 {
	background-color: rgb(172, 255, 197);
}
#b2 {
	background-color: rgb(172, 229, 255);
}
#b1:hover {
	background-color: rgb(130, 240, 163);
}
#b2:hover {
	background-color: rgb(117, 215, 240);
}
#b3 {
	background-color: rgb(255, 172, 172);
	border: 2px solid rgb(151, 30, 30);
	z-index: 2;
}
#b3:hover {
	background-color: rgb(233, 93, 93);
}
#b4 {
	background-color: rgb(204, 204, 204);
	border: 2px solid rgb(73, 73, 73);
	position: absolute;
	right: 1em;
}

#b4:hover {
	background-color: rgb(158, 158, 158);
}
#b5 {
	background-color: rgb(255, 243, 172);
	border: 2px solid rgb(151, 95, 30);
	z-index: 2;
}
#b5:hover {
	background-color: rgb(211, 194, 99);
}
input:hover {
	background-color: #e7e7e7;
}
input,
input:focus,
textarea,
textarea:focus {
	outline: 0;
}
textarea {
	width: 10em;
	height: 10em;
}
.hidden {
	display: none;
}
#notif {
	font-size: 16px;
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgb(203, 255, 150);
	padding: 1.5em;
	border-radius: 1em;
	border: 0.3em solid rgb(82, 126, 38);
	color: rgb(30, 56, 4);
	transition: ease all 0.3s;
	opacity: 0%;
}

#output-div {
	background-color: rgb(172, 255, 197);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2em;
	gap: 1em;
	border-radius: 2em 0 0 2em;
}
#output-div button {
	width: fit-content;
}
#output-note {
	display: flex;
	align-items: center;
	position: fixed;
	top: 50%;
	transform: translate(calc(100% - 2.5rem), -50%);
	right: 0;
	transition: all ease 0.5s;
}
#output-note:has(#output-bar:hover, #output-div:hover) {
	transform: translate(0, -50%);
}
#output-bar {
	background-color: rgb(172, 255, 197);
	height: fit-content;
	padding: 1rem 0.5rem 1rem 1rem;

	border-radius: 1.5rem 0 0 1.5rem;
	font-size: 20px;
	font-weight: bold;
}